Sortable toArray help, my array is empty!
First off, I'm VERY new to javascript/jquery so I definitely doing
something wrong, I just need a little help figuring out what it is. I
have an unordered list of FAQs that I need to be able to drag/drop
into the order I want and then submit that to the database. I'm not
using AJAX at the moment, one programming step at a time ;) The
sorting function works just fine, I can move them all I want, but I
need to get them to set toArray. I am then passing that via a hidden
input HTML element with a form button. My form is generated by various
PHP functions and database calls, but I dumbed it down to make it
readable. The form works right now as I am using drop down boxes to
choose the number in the order, so it isn't a separate HTML/PHP issue.
Here is what I have so far: (I have a bunch of other jquery functions
in the '.ready(function() {' as well, but I cut them out, those all
work)
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("#faq_sort").sortable({
axis: 'y',
handle: 'img',
placeholder: 'ui-state-highlight'
}, function() {
var faq_ord = $j('#faq_sort').sortable('toArray');
document.getElementById('faq_order').value=faq_ord;
});
)};
</script>
<form method="post" action="mysite.php">
<input type="submit" name="submit" id="reorder" value="REORDER" />
<input type="hidden" id="faq_order" name="faq_order[]" value="" />
<ul id="faq_sort">
<li id="faq_1"><img src="handle.png">FAQ 1</li>
<li id="faq_2"><img src="handle.png">FAQ 2</li>
<li id="faq_3"><img src="handle.png">FAQ 3</li>
</ul>
</form>
Any help getting this working would be greatly appreciated! Thanks!