Sorting with jQuery and Saving The New Order

I was building a form the other day and was adding items dynamically. I wanted to be able to drag and sort my items as I was building the form.

Now, all this is very easy to do with jQuery but my problem was that I needed my item id’s to be persistent. I needed a way to store the position of the item when the user clicked the submit button.

I tried the interwebs but could only find bits of the solution. After a lot of searching I managed to solve my problem using parts from people’s answers to similar questions.

So, I would like to share my solution. I hope this is helpful for someone out there.

You will need the latest jQuery and the latest jQuery UI. If you have any questions about this just leave me a message and I will be glad to help you.

First off I need a form and a list to store my items. I am not going to implement my dynamic add feature because I think that’s beyond the scope of this article so lets keep this simple:

This is my form:

<form action="somescript.php" method="post" id="myForm" name="myForm">

<ul id="mySortable">
<li id="itemID3">
<input type="text" id='itemID[3][name]'/>
<input type="hidden" id="itemID[3][order]">
</li>
<li id="itemID12">
<input type="text" id='itemID[12][name]'/>
<input type="hidden" id="itemID[12][order]">
</li>
<li id="itemID1">
<input type="text" id='itemID[1][name]'/>
<input type="hidden" id="itemID[1][order]">
</li>
</ul>
<input type="submit" id"mySubmit" value="Submit" />
</form>

As you can see my id is important and needs to be preserved. I need to store the item order in the database so I am assigning it to a hidden input field. This hidden input field will be updated with the order in the list when the user clicks the submit button.

Now I need to add the jQuery code to enable Drag-and-Sort on my list. if you are already using  jQuery in your project add this to your $(document).Ready if not add it to your header.

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('#mySortable').sortable();
$('#mySortable').disableSelection();
});
});
</script>

Now we need to add a way to update our hidden input. The easiest way, is to do it, when we click Submit. So we just attach a click event to the submit button and add our code to capture the sort order.


<script type="text/javascript">
$(document).ready(function(){
$('#mySubmit').click(function(){
var mySort = $j('#mySubmit').sortable('toArray');
for(i=0; i < mySort.length; i++)
{
var itemNumber = mySort[i].replace('item','');
$('input#item\\[' + itemNumber + '\\]\\[order\\]').val(i);
}
return true;
});
$(function(){
$('#mySortable').sortable();
$('#mySortable').disableSelection();
});
});
</script>

Now let me explain what’s going on here. First I get an array of all the ID’s in the list, the index corresponds to their position in the list. For that we use var mySort = $j('#mySubmit').sortable('toArray'); Since my Item ID is related to its inputs ID’s e.g. item3 had child item[3][somefield] I obtain that number and use it to select my hidden input. please note that I am using \\ before [ and ]. The reason being is that in jQuery selectors those are special characters that need to be escaped.

Once I have selected the correct field and updated its value the loop moves to the next until all are updated. We can now return a true to let the form post to the appropriated script.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.