JQuery Drag and Drop List проблема - PullRequest
Новая
       6

JQuery Drag and Drop List проблема

0 голосов
/ 26 мая 2011

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

Теперь, если я вообще не перетаскиваю список и не отправляю форму, все отправляется, как и ожидалось.Однако, если я перетащил элемент поверх другого, элемент, который я перетащил (или любой элемент, DOM которого был смещен), не будет отправлен.Не совсем уверен, что здесь происходит.Вот фрагмент каждого перетаскиваемого элемента: 

<ul class="sortable ui-sortable" id="sortable_buildings">
<li class="ui-state-default" id="1" style=""><input type="hidden" name="order[]" value="128"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Carlu</li>

<li class="ui-state-default" id="1"><input type="hidden" name="order[]" value="158"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CPR Building</li>
</ul>

И магия JQuery 

$(document).ready(function(){
            $("#sortable_buildings").sortable();

            $('#selected_buildings').change(function(){
                $('#sortable_buildings').html('');
                var str = "";
                $("#selected_buildings option:selected").each(function () {
                   str +=  '<li class="ui-state-default" id="1"><input type="hidden" name="order[]" value="' + $(this).attr('value') + '" /><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + $(this).text() + '</li>'
                 });
                 $("#sortable_buildings").append(str);
            });
        });

РЕДАКТИРОВАТЬ:

Заметил, что это проблема для всех созданных / измененных элементовв виде.Как мне правильно отправить форму?

Ответы [ 2 ]

2 голосов
/ 14 декабря 2012

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

P.S. В FF меня это только коснулось, IE отлично работал даже с тегом form внутри таблицы.

2 голосов
/ 26 мая 2011

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

Добавление: вам не нужно создавать скрытый элемент для хранения значения * 1006.* элемент.Вы должны следовать этому подходу:

  1. .data метод для хранения данных для любого <li> элемента
  2. , назначающий пользовательский обработчик событий для формы.*

В этом случае точка (1) вашего кода будет:

/* store and append <li> tag */

var tempList=$("<li>other stuff but no hidden field</li>");
tempList.data("value", $(this).attr("value"); // store 128/158 whatever you want
$(target).append(tempList);

// bind form submit option
$(this).parent().bind("submit", function() 
{ 
// serialize all <li> tag with data :-)
}

/* retrieve */

...