Блог

Главная - Вопросы по программированию - сортируемый список пользовательского интерфейса jquery не отслеживает обновления атрибутов элементов списка

сортируемый список пользовательского интерфейса jquery не отслеживает обновления атрибутов элементов списка

#jquery #ajax #jquery-ui-sortable

#jquery #ajax #jquery-ui-sortable

Вопрос:

Я работаю со списком, элементы которого можно выбирать (с помощью флажков) и сортировать (с помощью jquery ‘sortable’).

Список выглядит следующим образом:

 <ul id="dragdrop">
    <li id="1290"><input type="checkbox" id="290" checked class="slideToggle" /><img ... /></li>
    <li id="1291"><input type="checkbox" id="291" checked class="slideToggle" /><img ... /></li>
</ul>

… и javascript выглядит следующим образом:

 $(".slideToggle").click(function () {
    var slideId = $(this).attr("id");
    var checked = $(this).attr("checked");
    if (slideId) { 
        $.post("ToggleInclusion", { "slideId": slideId, "isChecked": checked },
            function () {
                var newId = checked ? "1" : "0"   slideId;
                $(this).parent().attr("id", newId);
            });
    }
});

$("#dragdrop").sortable({
    update: function() {
        var order = $(this).sortable("toArray").toString();
        $.post("UpdateOrder", { "order": order }, function () { });
    }
});

Итак, когда пользователь снимает флажок, скажем, для второго элемента (id = 291), его элемент списка изменяется на 

 <li id="0291" ... ></li>

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

Я пробовал звонки $("#dragdrop").sortable("refresh") и друзьям как в конце обратного вызова переключения, так и непосредственно перед публикацией сортируемого обновления, но безрезультатно.

Есть идеи?

Ответ №1:

Вместо использования события «update» попробуйте вместо этого «stop» и объедините свой собственный параметр сортировки.

 $("#dragdrop").sortable({
  stop: function() {
    var order = "";
    $("#dragdrop").find("tr").each(function() {
        order = order   $(this).attr("id")   ",";
    });
    if(order.length > 0) order = order.substr(0, order.length - 1); // remove the last comma
    $.post("UpdateOrder", { "order": order }, function () { });
  }
});

Надеюсь, у вас это работает!

Комментарии:

1. Спасибо, но, к сожалению, это не помогает. Ни использование события stop, ни ручная конкатенация не отслеживают обновленные атрибуты id. Я действительно удивлен, что при выполнении $('#dragdrop li').each(... не отображаются правильные значения идентификаторов. Я думаю, что есть что-то более фундаментальное, чего мне не хватает, например, возможно, тот факт, что атрибуты элементов списка кэшируются только при загрузке страницы и, следовательно, не могут обновляться после этого? когда я снимаю некоторые флажки и обновляю страницу, а затем переупорядочиваю, обновленные атрибуты подбираются просто отлично.

Ответ №2:

Таким образом, решение состоит в том, чтобы вообще не беспокоиться о сортируемых методах — просто извлекать нужные свойства непосредственно из флажков:

 $(".slideToggle").click(function () {
    var slideId = $(this).attr("id");
    var checked = $(this).attr("checked");
    if (slideId) { 
        $.post("ToggleInclusion", { "slideId": slideId, "isChecked": checked },
            function () { });
    }
});

$("#dragdrop").sortable({
    update: function() {
        var order = $(".slideToggle").map(function() {
            return ($(this).attr("checked") ? "1" : "0"   $(this).attr("id");
        }).get().join(",");
        $.post("UpdateOrder", { "order": order }, function () { });
    }
});