Jquery Sortable List with getJSON method

Question

I am working on a tutorial that uses getJSON to add list items to the DOM. There also needs to be the JqueryUI sortable plugin to sort the lists. For some reason unknown to me the plugin does not work. What am I missing here? Should the sortable function be inside the getJSON callback? Any suggestions would be great.

here is my code I have so far:

$(function () {
 $('body h1').append('My Todo List');

 $.getJSON('todo.json', function(data) {

var html = '<ul id="sortable" class="ui-sortable">';

$.each(data, function(index) {

    var todo = data[index];
    if (todo.done === false) {
        todo.done = (" ")

    } else {
        todo.done = ("(DONE)")
    }
    html += '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + todo.who + " needs to " + todo.task + " by " + todo.dueDate + " " + todo.done + '</li>';
});
    html += '</ul>';
   $('body #container').append(html);
});



});

HTML File:

<!DOCTYPE html>
<html>
<head>
    <title>Jquery ToDo List</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="todo.js"></script>
    <script>
        $(function () {
            $("#sortable").sortable("refresh");
            $("#sortable").disableSelection("refresh");
        });
    </script>
    <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 14px; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
</head>
<body>
<h1></h1>
<div id="container">

</div>



</body>
</html>

JSON

[
{"task":"get milk","who":"Scott","dueDate":"2013-05-19","done":false},
{"task":"get broccoli","who":"Elisabeth","dueDate":"2013-05-21","done":false},
{"task":"get garlic","who":"Trish","dueDate":"2013-05-30","done":false},
{"task":"get eggs","who":"Josh","dueDate":"2013-05-15","done":true}

]

Answer 1

you have to call the sortable after appending the data. In your $.getJSON callback call the sortable again like given below. jquery will wire the sortable only if the element is present in the DOM when the dom is ready. you are adding the elements dynamically so you have to call the sortable again after adding the elements into the DOM .

 $.getJSON('todo.json', function(data) {

var html = '<ul id="sortable" class="ui-sortable">';

$.each(data, function(index) {

    var todo = data[index];
    if (todo.done === false) {
        todo.done = (" ")

    } else {
        todo.done = ("(DONE)")
    }
    html += '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + todo.who + " needs to " + todo.task + " by " + todo.dueDate + " " + todo.done + '</li>';
});
    html += '</ul>';
   $('body #container').append(html);
});

$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();

});

Edit

Here is the bin http://jsbin.com/IPubElE/1/

demo uses the in-memory data but it should work fine even inside the callback method.

Jquery Sortable List with getJSON method

Question

1 answers

solution1
0 2014-01-08 16:05:34

Jquery Sortable List with getJSON method

Question

1 answers

solution1 0 2014-01-08 16:05:34

solution1
0 2014-01-08 16:05:34