Closed
Description
Using the following code:
nestableElement.nestable('replace', {
id: replaceId,
name: name,
label: name,
slug: slug,
css_class: cssClass,
children: children
});
where children is similar to the following object:
[{
"css_class" : "",
"slug" : "/distributors/find",
"id" : 1472820817026,
"label" : "Find A Distributor",
"name" : "Find A Distributor"
}, {
"css_class" : "",
"slug" : "/distributors/become",
"id" : 1472820818729,
"label" : "Become A Distributor",
"name" : "Become A Distributor"
}, {
"css_class" : "",
"slug" : "/distributors/suggest",
"id" : 1472820819257,
"label" : "Suggest A Distributor",
"name" : "Suggest A Distributor"
}
]
It results in a new li being created inside the existing li, and the expand/collapse doesn't display. The following is copied from Chrome:
<li data-name="Distributors" data-label="Distributors" data-id="1472139716346" data-url="/distributors" data-css_class="" data-is_open="true" class="dd-item">
<li data-id="1472139716346" data-name="Distributors" data-label="Distributors" data-url="/distributors" data-css_class="" class="dd-item">
<div class="dd-handle"><span class="dd-content">Distributors</span></div>
<div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
<ol class="dd-list">
<li data-css_class="" data-url="/distributors/find" data-id="1472820817026" data-label="Find A Distributor" data-name="Find A Distributor" class="dd-item">
<div class="dd-handle"><span class="dd-content">Find A Distributor</span></div>
<div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
</li>
<li data-css_class="" data-url="/distributors/become" data-id="1472820818729" data-label="Become A Distributor" data-name="Become A Distributor" class="dd-item">
<div class="dd-handle"><span class="dd-content">Become A Distributor</span></div>
<div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
</li>
<li data-css_class="" data-url="/distributors/suggest" data-id="1472820819257" data-label="Suggest A Distributor" data-name="Suggest A Distributor" class="dd-item">
<div class="dd-handle"><span class="dd-content">Suggest A Distributor</span></div>
<div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
</li>
</ol>
</li>
</li>
I'm using a custom itemRenderer:
function (item_attrs, content, children, options, item) {
var item_attrs_string = $.map(item_attrs, function (value, key) {
return ' ' + key + '="' + value + '"';
}).join(' ');
if (!item.label) {
setTimeout(function () {
$('[data-id=' + item.id + ']').find('.dd-handle').effect('highlight', {color: '#dff0d8'}, 2000);
}, 100);
}
var html = '<' + options.itemNodeName + item_attrs_string + '>';
html += '<' + options.handleNodeName + ' class="' + options.handleClass + '">';
html += '<' + options.contentNodeName + ' class="' + options.contentClass + '">';
html += content;
html += '</' + options.contentNodeName + '>';
html += '</' + options.handleNodeName + '><div class="dd-options">' +
"<button class='btn btn-sm btn-success add' data-toggle='tooltip' data-placement='top' title='' " +
"data-original-title='Add'> " +
"<i class='fa fa-plus-square'></i>" +
"</button>" +
"<button class='btn btn-sm btn-info edit' data-toggle='tooltip' data-placement='top' title='' " +
"data-original-title='Edit'> " +
"<i class='fa fa-edit'></i>" +
"</button>" +
"<button class='btn btn-sm btn-danger delete' data-toggle='tooltip' data-placement='top' title='' " +
"data-original-title='Delete'> " +
"<i class='fa fa-trash'></i>" +
"</button>" +
"</div>";
html += children;
html += '</' + options.itemNodeName + '>';
return html;
}
I can't see that I'm doing anything wrong here. I've inspected the nestable source and I'd suggest the replace function should use replaceWith() instead html():
replace: function (item)
{
var html = this._buildItem(item, this.options);
this._getItemById(item.id).replaceWith(html);
}
This appears to fix the HTML structure issue but the expand/collapse still doesn't display. Are you able and available to help?
Many thanks