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!)
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});
}
});
});
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.
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>
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 ;)
