4

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 ?

1
  • I am trying something same, did you get any solution? The Answers given in the thread are not relevant
    – Umar Adil
    Commented Jun 26, 2015 at 6:58

5 Answers 5

6

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.

2
  • 1
    Neither of your solutions solve the problem that he mentioned: "the expand/collapse button does not appear"
    – Pih
    Commented Oct 21, 2014 at 15:18
  • How to save the nested data into a variable so that with PHP i can use this as menu? Commented Mar 25, 2018 at 7:54
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>");
}
0
1

we all have seen how to add items dynamically to nestable. I have written this code, where in you can create nestable items from JSON object.

//JSON Object

var json =  [{
  "id": 1,
  "content": "Payment Terms",
  "children": [{
    "id": 2,
    "content": "PT1"
  }, {
    "id": 3,
    "content": "PT2"
  }]
}, {
  "id": 4,
  "content": "Delivery Terms",
  "children": [{
    "id": 5,
    "content": "dt1"
  }, {
    "id": 6,
    "content": "dt2"
  }]
}];

Function to create nestable :

function makeNestableListUsingJSONArray(jsonArray, root) {

  if (typeof root === 'undefined') {
    root = $('body');
  }
  var $div = $('<div id="nestable"><ol class="dd-list"></ol></div>');
  root.append($div);
  for (var i = 0; i < jsonArray.length; i++) {
    var $li = $("<li class='dd-item' data-id='" + jsonArray[i].id + "'><div class='dd-handle'><span class='dd-content'>" + jsonArray[i].content + "</span></div></li>");
    root.find('ol.dd-list:first').append($li);    

    if (typeof jsonArray[i].children !== 'undefined') {
      makeNestableListUsingJSONArray(jsonArray[i].children, $li);
    }
  }
  $('#nestable').nestable({maxDepth:2});
}

call the function 
makeNestableListUsingJSONArray(json);
1
  • Thanks for supporting... I shall be adding more things in my next post like you can even edit the list. Commented Oct 1, 2016 at 6:44
1

There is also new version of Nestable package that support loading items dynamically from JSON and adding new item to the list on-the-fly. Read more here: https://github.com/RamonSmit/Nestable2

$('.dd').nestable('add', {"id":1,"children":[{"id":4}]});
0

Probably it's too late to answer, but for anyone facing the same issue with buttons not showing, this is the solution I've come so far.

$('#nestable').nestable();
$('[data-action="collapse"],[data-action="expand"]').remove();

let collapseBtnTemplate = '<button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>';
let expandBtnTemplate = '<button data-action="collapse" type="button" style="display: none;">Collapse</button><button data-action="expand" type="button">Expand</button>';

$('#nestable > ol:first-child > li.dd-item').each(function(){
    $(this).prepend( $(this).hasClass('dd-collapsed')? expandBtnTemplate : collapseBtnTemplate );
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.