6

Alright so I have a nested sortable list, each item is therefore both a container and a sortable element.

The problem I am facing is that, whenever I add a new element, I want jQuery to refresh its internal state with the new item. According to the documentation, one has to call the sortable method passing as parameter 'refresh', but still I can't make it work.

Sample code: http://jsfiddle.net/X5sBm/

JavaScript:

$(document).ready(function() {
    var list = $('#mycontainer ul').sortable({
        connectWith: '#mycontainer ul',
        placeholder: 'myplaceholder'
    });

    function addElement(text) {
        $('#mycontainer > ul').append('<li>' + text + '<ul></ul></li>');
        list.sortable('refresh');
    }

    addElement('yolo');
});

HTML:

<div id="mycontainer">
    <ul>
        <li>
            Some text
            <ul>
            </ul>
        </li>
        <li>
            Some text 2
            <ul>
            </ul>
        </li>
    </ul>
</div>

CSS:

#mycontainer > ul {
    display: block;
}

#mycontainer > ul ul {
    min-height: 10px;
    padding-left: 20px;
}

.myplaceholder {
    background-color: yellow;
}

Try to drag one pre existing item under the newly added one, you won't be able to do so even after the refresh.

2 Answers 2

7

I found a cheap fix:

I call sortable again on the same tag reinitialising the Sortable plugin like so:

$('#mycontainer ul').sortable({
    connectWith: '#mycontainer ul',
    placeholder: 'myplaceholder'
});

and it works.

2
  • This helped me, I didn't realize what I was doing: I was adding a brand new container element, rather than adding to a parent sortable container. That new element was never set up, and my console actually notified me of that! After pulling my head from my posterior, I realized this. So, I created an Object that was at a higher scope for the sortable options, and then I can reuse those options after my AJAX call. I hope this helps someone else! Sep 15, 2015 at 19:36
  • 4
    Is this really valid though? I am having the same problem, where it seems that refresh does nothing, other than returning an error (which is not fixable btw, it just seems to not work with nested elements). It seems a bit unpractical to end up copy-pasting the whole sortable() function again, since mine is bigger than those 4 rules of code as in the example above. Anyone who might have a better answer? Nov 3, 2019 at 20:55
0

The key understanding and take-away is to make the dynamically created <ul></ul> initialized with the sortable options. I suggest making an options object for easy re-use.

$(document).ready(function() {
    const container = $('#mycontainer ul');
    const options = {
        connectWith: '#mycontainer ul',
        placeholder: 'myplaceholder'
    };
    container.sortable(options);
    
    function addElement(text) {
        let newListItem = $('<li>').text(text);
        newListItem.append($('<ul>').sortable(options)); // <- key concept
        $('#mycontainer > ul').append(newListItem);
        //container.sortable('refresh');
        
    }
    
    addElement('yolo');
    
});
#mycontainer > ul {
    display: block;
}

#mycontainer ul ul {
    min-height: 10px;
    padding-left: 20px;
}

.myplaceholder {
    background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="mycontainer">
      <ul>
          <li>
              Some text
              <ul>
              </ul>
          </li>
          <li>
              Some text 2
              <ul>
              </ul>
          </li>
          <li>
              Some text 3
              <ul>
              </ul>
          </li>
      </ul>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>

Your Answer

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

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