Как добавить перетаскиваемые элементы списка из результата .ajax GET?

Question

Я хочу иметь возможность добавлять свои собственные элементы в перетаскиваемый список из массива продуктов, возвращаемых при вызове .ajax, на основе примера корзины покупок по номеру http://jqueryui.com/demos/droppable/#shopping-cart.

Я пробовалколичество вариантов добавления и т. д., чтобы получить их в списке, все они заставляют их «появляться», но не перетаскиваются.Я гуглил это пару дней и не нашел четкого объяснения того, как этого добиться.Я продолжаю находить ответы о .live, но это, видимо, устаревшее решение.

Вот основной код, который я пытаюсь заставить работать.Я пропустил полдюжины попыток, которые я сделал, в надежде, что кто-нибудь даст мне самый «правильный» способ сделать это, вместо того, чтобы пытаться улучшить кучу моих экспериментов.Если это имеет значение, этот код должен выполняться при открытии модальной диалоговой формы.

    $.ajax({
        type: "POST",
        url: "GetMyProducts.php",
        data: dataString,
        dataType: "json",
        success: function(data) {
            // data returned is:
            // {"product_id": 10004, "product_name": "DVD"}, 
            // {"product_id": 10040, "product_name": "CD"}, 
            // {"product_id": 10059, "product_name": "Blue-Ray"}
            $.each(data, function(i,item) {
                // WHAT do I do here to append my data as a draggable List Item?
            });
        }
    });

    <div id="products">
        <h1 class="ui-widget-header">Products</h1>    
        <div id="catalog">
            <h3>My Products</h3>
            <div>
                <ul>
                    <li>iPhone</li>
                    <li>iPod</li>
                    <li>iPad</li>
                </ul>
            </div>
        </div>
    </div>

Поджог предметов LI - последние два не имеют всей «магии»

Answer 1

После прочтения ответа Грега на ваш вопрос, который объяснил моему коллеге, в чем была проблема. Вещь, которая нас прояснила, была комментарием для повторной инициализации.

В моем ограниченном понимании я объясню, как я понимаю, и, может быть, кто-то еще может уточнить.

Поскольку вызов AJAX является АСИНХРОННЫМ, страница будет продолжать загружаться, пока AJAX все еще работает в фоновом режиме. Как указал Грег, это проблема синхронизации, загрузка страницы завершена, но AJAX не завершает загрузку данных и заполнение неупорядоченного списка. Поэтому попытка применить перетаскиваемый метод к элементам списка до того, как элементы будут добавлены в список отмены заказа, не будет работать вообще. Нам нужно применить перетаскиваемый метод после завершения AJAX.

Исправление заключается в использовании опции COMPLETE метода ajax для применения перетаскиваемого метода к элементам списка после их загрузки в неупорядоченный элемент списка. Или, как только AJAX-вызов завершен на 100%, затем перетаскивайте элементы списка, которые были добавлены в неупорядоченный элемент списка.

Итак, чтобы использовать ваш код в качестве примера ...

* * 1010

Надеюсь, что это имеет смысл, и это поможет кому-то еще в будущем.

Answer 2

После циклического просмотра и добавления новых элементов списка в текущий список следующий вызов может работать, чтобы убедиться, что они также имеют перетаскиваемые функции.

$.each(data, function(i,item) {
   // Create new list items as Greg show's in his post
}

$("#catalog li").draggable();

или

$("#catalog li").not(".ui-draggable").draggable()

Answer 3

Похоже, вам придется использовать $(selector).draggable( "destroy" ); (и, возможно, сбрасывать и, возможно, сортировать) и повторно инициализировать.Документы говорят, что «уничтожить» вернется в исходное состояние, хотя.Дайте нам всем знать, если вы найдете другой способ.

Сейчас я работаю над аналогичной ситуацией и обновлю этот пост с помощью решения, которое я найду.

Answer 4

Другой Грег П, посмотрим, что мы можем здесь сделать! Вероятно, это артефакт попытки сократить код, но прежде всего вам нужно убедиться, что все возвращаемые данные упакованы в массив; в противном случае вы не сможете выполнить итерацию по индексу. Это только ваши данные, как показано в ваших комментариях, за исключением заключенных в квадратные скобки:

[
  {
    "product_id": 10004,
    "product_name": "DVD"},
  {
    "product_id": 10040,
    "product_name": "CD"},
  {
    "product_id": 10059,
    "product_name": "Blue-Ray"}
]

Далее, хотя вы возвращаете идентификатор продукта, ваша базовая разметка, кажется, не использует его (с 3 iDevices). Я предполагаю, что вы хотите увидеть имя, а затем я собираюсь сохранить идентификатор в произвольном атрибуте данных (data-productId)).

Так как это будут элементы списка, вы можете придумать и сделать узлы, а затем заполнить их значениями, но если вы объедините строку <li>, а затем добавите, вы получите тот же результат, поэтому это то, что я сделаю. Возможно, вы предпочтете построить, а затем заполнить.

var $productList = $('#catalog ul');
$.each(data, function(i, item) {
    var listItem = '<li data-productId="' + item.product_id + '">' + item.product_name + '</li>';
    $productList.append(listItem);
});​

Пример основ: http://jsfiddle.net/sQtkB/

Это то, что добавляет их в список. Что касается их перетаскивания, это роль jQuery UI. Если вы уже инициализировали список как перетаскиваемый, я полагаю , что слушателем является сам узел списка, так что вы можете добавить к нему, и его члены все равно должны вызывать события. Если нет, возможно, вам придется заново инициализировать перетаскиваемый список.