save jquery ui-sortable positions to DB

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!)

score 32 · Accepted Answer · answered Aug 17 '11 at 17:57

32

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

answered Aug 17 '11 at 17:57

Mihai Iorga

39,330
16
106
107

thanks! that did the trick, although it took us another day to figure out how to save every submission and get the median values. – user899163 Sep 03 '11 at 23:06
4

should you be using a post instead of a get since you are modifying data on the server? Also, what happens if server save isn't successful; maybe should use beforeStop method and issue a cancel on the sort if server save fails? – Ryan Apr 16 '13 at 14:28

score 4 · Answer 2 · answered Oct 15 '12 at 13:23

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.

score 0 · Answer 3 · answered Jul 21 '14 at 18:49

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>

score 0 · Answer 4 · answered Nov 17 '15 at 00:10

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 ;)

save jquery ui-sortable positions to DB

4 Answers4

Linked