Moving Items Up and Down In A List

Hi,

Working on a back-end CMS for a music site. I have a list of about 200 songs, for example, under one genre.

What I’m trying to do is set up a page where i can use up/down buttons in order that I can organized the songs – this will be the order in which they are displayed on the visitor side of the site.

I thought of using a listbox and javascript with two buttons, one for up and another for down, to move items up and down in the list. Seems easy enough.

However, I was wondering if someone has done something like this where, for example, I list out each song as a CSS block element … next to the title have up / down buttons and move the block element (song) up and down in the list, without refreshing the page each time. Since the number of songs is so large, I figure I would stick the list of songs inside of a scrolling div.

Any suggestions, just looking at any ideas…rather a slicker way to move records up and down via a click with page reloads.

thanks in advance, and any examples / links would be appreciated.

hc

perhaps this is a start?

Interesting, however, the only problem I see would be is there is no way to submit the page like a form then in the receiving php script be able to update the mysql table with the new sort order.

Thanks, I think you put me on the right track. For anyone interested here are two examples of jquery that saves the results using php to a mysql database. The last example uses standard javascript - note the client side script.

  1. Sortable using a form & submit button to save changes.

  2. Sortable using ajax – no page refreshing necessary.

  3. Moving items in a regular list box using regular javascript

Theres a callback funciton for that script that w2ttsy posted…under the events tab look at stop…this callback is fired when sorting has finished…you just need to fire an ajax call at this point…sending the new sort order to the server

I’m assuming that each time you drop the item the callback function is called?

I understand the concept, however, seems that allowing the user to do all the sorting, then create an “apply changes” button to make the ajax call to update the mysql database in “one stroke” would be more efficient.

I’m completely new to jquery, so, guess a lot of reading to do.

Jquery sortable is the way to fly. Rather than fire a callback for every single move, I tend to fire the ajax request from a button. The sortable extension has a serialize function which will give you an array of the objects in the list with the IDs. You can then take that list of IDs and update the database with the new order.

Would you have a bit of sample code, something simple, to share?

I’m curious about how you are setting up the css button and which event/method is being called. Are you using an onclick to call serialize which then calls .load(‘scriptname.php’) ?

I’m using ASP.NET MVC, not php here, but the client-side bits are pretty similar.

The button is a pretty simple–just a hyperlink. I attach the magic to the click event using jquery.

The “magic” just grabs the list from $().sortable’s toArray method, some of the data coming from the link and then fires a JSON post to the server. Involved jquery/javascript is:


    <script type="text/javascript">
        var buttonContainer;
        $(document).ready(function() {
            $("#tabs").tabs();
            var sortlist = $("ul.zonewidgets");
            sortlist.sortable(
                {
                    cursor: 'crosshair',
                    start: sortStart
                }
            );
            var firesorts = $('a.firesortupdate');
            firesorts.hide();
            firesorts.click(function() {
                if (confirm("Update widget sort order?")) {
                    var data = new Object();
                    data.Widgets = parseWidgetIds(sortlist.sortable('toArray'));
                    data.PageId = $(this).attr('data-pageId');
                    data.Zone = $(this).attr('data-zone');
                    $.post('<&#37;= Url.Action("SortWidgets", "Page") %>',
                            data,
                            function(data, textStatus) {
                                if (textStatus == 'success') {
                                    var msg = data;
                                    if (msg.success == true) {
                                        firesorts.hide();
                                        alert('Sort order updated.');
                                    }
                                    else {
                                        alert('Error processing update: ' + msg.message);
                                    }
                                }
                            },
                            'json'
                            );
                }
                return false;
            });

            function sortStart(event, ui) {
                firesorts.show();
            }
        });

        function parseWidgetIds(idArray) {
            var ret = new Array(idArray.length);
            for (i = 0; i < ret.length; i++) {
                ret[i] = idArray[i].split('_')[1];
            }
            return ret;
        }

Thanks, I managed to figure out how to set up the button to fire off the ajax call passing off the list items as a serialized array to the php saving script, then pop up a dialog stating if the update was successful or not.

Glad I started this little project, I can see where jQuery is going to come in handy, especially when building back-end cms systems.

I just included my sample in case someone else finds the thread.



#dialog { display:none; }

$(document).ready(function(){
        $("#sortable").sortable();
        $("#sortable").disableSelection();         
        
        $(".savebutton").click( function() {
            var order = $('#sortable').sortable('serialize'); 
            $("#dialog").load("savesort.php?"+order); 
            
              $("#dialog").dialog({
                   bgiframe: true,
                   modal: true,
                   buttons: {
                   Ok: function() {
                    $(this).dialog('destroy');
                }
            }
        });      
        

            
        });
    
    });



 <div id="dialog" title="System Notice">
     <!-- php fills in the response here -->  
  </div>
...

<ul id="sortable">
    <li id="listItem_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li id="listItem_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    
...

</ul>

...

<div>
  <a href="#" class="savebutton">SAVE CHANGES</a>
</div>


instead of a popup, id just ajax back a message to the user.

also, when i’ve used this, i’ve opted for the use of a submit button to post the serialized string to my app.

That is what my app is doing, when it calls the php, the php updates the database then prints the results which jQuery populates the #dialog with. Thus, it is a single ajax call vs calling the php then the php calling back via ajax (double work).

I understand where your coming from. In the particular app that I’m writing I really don’t need to post the form to another page, however, in other apps there will/might be a need to do that.