Question

I have created a drag and droppable list on my website, and the drag/drop aspect of it seems to be working. Inside of each list element is a “hidden” form field which contains data assioated with each list element.

Now if I dont drag the list at all, and submit the form, everything submits as expected. However, if I dragged an element over another, the element I dragged(or any element whose DOM got shifted around) does not get submitted. Not really sure whats going on here. Here is a snippet of each draggable element:

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

And the JQuery magic

$(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);
            });
        });

EDIT:

Noticed this is a problem for all items created/modified in the form. How would I properly submit the form?

Answer 1

Inside <form> tag when you submit, every hidden element should be serialized and submitted. For this, I think when you are dragging an element it is going beyond the <form> tag hence not submitted

---

Addition: You need not to create an hidden element to store the value of the <li> element. You should follow this approach:

1. .data method to store data for any <li> element
2. assign a custom event handler for the form.

In this case, point (1) of your code will be:

/* 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 */