JQuery Sortable List с методом getJSON

Я работаю над учебником, который использует getJSON для добавления элементов списка в DOM. Для сортировки списков также должен быть JqueryUI-сортируемый плагин. По какой-то причине неизвестный мне плагин не работает. Что мне здесь не хватает? Должна ли сортируемая функция находиться внутри обратного вызова getJSON? Любые предложения были бы замечательными.JQuery Sortable List с методом getJSON

вот мой код у меня до сих пор:

$(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 Файл:

<!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}

]

источник

2014-01-08 jmccommas

см. Обновленный ответ с рабочим демо jsbin ........... –

вы должны вызвать sortable после добавление данные. В вашем обратном вызове $.getJSON снова введите sortable, как показано ниже. jquery проведет проводку sortable только в том случае, если элемент присутствует в DOM, когда дом готов. вы добавляете элементы динамически, поэтому вам нужно снова позвонить sortable после добавления элементов в 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(); 

});

Редактировать

Вот бин http://jsbin.com/IPubElE/1/

демо использует данные в оперативной памяти, но он должен работать нормально, даже внутри метода обратного вызова.

источник

2014-01-08 16:05:34

Да, я уже пробовал этот подход, но это тоже не работает. – jmccommas

Я добавил бит к ответу, который имеет рабочую демонстрацию 'sortable' с данными, которые вы указали на это ... –

работает так, как должно! Огромное спасибо за поддержку! – jmccommas

JQuery Sortable List с методом getJSON

ответ

Смежные вопросы