Nestable jQuery plugin : Add an item dynamically

Question

I use the jQuery plugin called Nestable available here : https://github.com/dbushell/Nestable

I try to add an item with a parent dynamically. But if I only add the code in the page, the expand/collapse button does not appear and I think there is a better solution to add item with setParent function ?

Does anyone has already added an item dynamically with this plugin ?

Answer 1

Try this:

HTML

<button id="appendnestable">Add li</button>
<div class="dd" id="nestable">
  <ol class="dd-list outer">
    <li class="dd-item dd3-item" data-id="1">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="1">Item 1</div>
    </li>

    <li class="dd-item dd3-item" data-id="2">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="2">Item 2</div>
    </li>

    <li class="dd-item dd3-item" data-id="3">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="3">Item 3</div>
    </li>
  </ol>
</div>

JS

$(function(){
  var nestablecount = 4;
  $('#appendnestable').click(function(){
    $('ol.outer').append('<li class="dd-item dd3-item" data-id="'+nestablecount+'"><div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="'+nestablecount+'">Item '+nestablecount+'</div></li>');
    nestablecount++;
  });
});

JSFiddles

http://jsfiddle.net/mijopabe/35Kqu/

http://jsfiddle.net/mijopabe/YgU52/

Food for Thought:

The incremental counter is a good way to keep track of forms/modals assigned to each dynamically created list item, if needed. Then, use the .on() or .delegate() jquery properties if further actions is required of said forms/modals.

Answer 2

Use this function to add new node:

function addNode(){
    $("#nestable > ol").append("<li class='dd-item' data-id='13'><div class='dd-handle'>New Node</div></li>");
}