Sub-levels of Jquery Sortable one serialize command
I am working on a shopping cart that utilizes JQuery for sorting "choices" for products. For instance, T-shirts would have a choice for size and a choice for color. I want things to be sortable so that the person adding choices can declare which choices are shown first in the drop-down menus on the website.
I have things working so that there is one master "sortable" so you can pick to have "color" or "size" to be displayed first, and then both size and color are sortable in their own right so you can say that you want Small to be shown above Medium and so on.
The problem comes when I try to submit the form. I can get it to serialize the master container, so I know which choice type should be shown first, but I cannot get the individual choices to serialize. The main effect I want to end up with is a multi-dimensional array.
- jQuery(window).load(function(){
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1,
onSelect: updateCoords
});
$("#masterlist").sortable({
items: 'div',
tolerance: 'pointer',
containment: 'parent',
axis: 'y'
});
$("#sublist_1").sortable({
items: 'li',
tolerance: 'pointer',
containment: 'parent',
axis: 'y'
});
$("#sublist_2").sortable({
items: 'li',
tolerance: 'pointer',
containment: 'parent',
axis: 'y'
});
});
- <div id="masterlist">
<div id="sublist_1"><span class="choicetype">Size</span>
<ul>
<li id="sublist1_1">Small</li>
<li id="sublist1_2">Large</li>
</ul>
</div>
<div id="sublist_2"><span class="choicetype">Quantity</span>
<ul>
<li id="sublist2_1">1</li>
<li id="sublist2_2">2</li>
</ul>
</div>
</div>
So that's what I have, and everything sorts correctly, but I don't know how to get everything to serialize properly. Any help?