save jquery ui-sortable positions to DB - php

Question

Im trying to replicate the functionality of this page (http://www.kissfm.ro/fresh-top-40/) for a friend who has a small web radio. The site is setup in wordpress fyi.
So my question is, after searching stackoverflow, how do i save/get the revised charts based on the users input? i found how to save single submittions but how do i get the final charts based on the user choice?
Thanks in advance!
(code or link to tutorial welcome!)

Answer 1

make your HTML sortable, add javascript, and save to php on update.
<ul id="sortable">
<li id="1">elem 1</li>
<li id="2">elem 2</li>
<li id="3">elem 3</li>
<li id="4">elem 4</li>
</ul>
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
$.get('saveSortable.php', {order:newOrder});
}
});
});

Answer 2

I know this is old, but what I do is just add a hidden input element in every LI. They would all have a the same name with [] at the end. This way, when you post the form containing the UL, you will get an array in your post values in the order you just put your list.

Answer 3

According to the Sortable docs we have to prefix the LI's id with some string.
Then if we serialize the sortable in the update method we'll get a nice array in php e.g. new_order[]=1&new_order[]=2 etc.
var data = $(this).sortable('serialize');
<ul id="sortable">
<li id="new_order_1">elem 1</li>
<li id="new_order_2">elem 2</li>
<li id="new_order_3">elem 3</li>
<li id="new_order_4">elem 4</li>
</ul>

Answer 4

You may POST with input to DB and save it
Here we go:
<ul id="sortable">
<li id="1"><input type ="text" value="elem 1"/></li>
<li id="2"><input type="text" value="elem 2"/></li>
.
.
</ul>
<style>
#sortable{
border: hidden;
}
</style>
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
$.get('saveSortable.php', {order:newOrder});
}
});
});
Hope it helps ;)