Update database order of list using Jquery Sortable

Question

Hello I have a list which looks like this: http://imgur.com/z2nf4yz In this list you can drag items in the different lists. Now, I want to update the database values of these items once you drag them. Ideally I want to update only once you press a "Save" button, but you can ignore this if it is to much work.

I use this to drag the items: http://johnny.github.io/jquery-sortable/ , which is very similar to jQuery UI's version.

I have absolutely now clue how Ajax works, and I would love some help. This is the list structure:

<ol class="nav nav-tabs nav-stacked sortable" style=
"margin-top: 25px;">
    <li class="page_select menuid_1" style=
    "color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
    Main Menu</li>

    <li class="page_select menuid_1 position_1 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId1" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=1">Home</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_1 position_4 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId2" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=2">About Me</a>

        <ol class="nav nav-tabs nav-stacked">
            <li class=
            "page_select menuid_1 position_1 online">
                <span class="pull-right" style=
                "margin: 8px 32px 0 0"><a class=
                "deleteToggle icon-trash pull-right"
                data-toggle="modal" href="#deleteModal"
                id="deleteId12" style=
                "font-style: italic"></a></span><a href="pages.php?page=12">Test</a>
            </li>

            <li class=
            "page_select menuid_1 position_2 offline">
                <span class="pull-right" style=
                "margin: 8px 32px 0 0"><a class=
                "deleteToggle icon-trash pull-right"
                data-toggle="modal" href="#deleteModal"
                id="deleteId11" style=
                "font-style: italic"></a></span><a href="pages.php?page=11">Test
                Page</a>
            </li>
        </ol>
    </li>

    <li class="page_select menuid_1 position_4 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId3" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=3">Contact</a>

        <ol class="nav nav-tabs nav-stacked">
            <li class=
            "page_select menuid_1 position_9 offline">
                <span class="pull-right" style=
                "margin: 8px 32px 0 0"><a class=
                "deleteToggle icon-trash pull-right"
                data-toggle="modal" href="#deleteModal"
                id="deleteId7" style=
                "font-style: italic"></a></span><a href="pages.php?page=7">Test
                Page</a>
            </li>
        </ol>
    </li>

    <li class="page_select menuid_1 position_3 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId4" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=4">Portfolio</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_1 position_3 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId5" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=5">Shop</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_2" style=
    "color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
    Footer Menu</li>

    <li class="page_select menuid_2 position_5 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId6" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=6">Sitemap</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class=
    "page_select menuid_2 position_9 offline">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId8" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=8">Last Page</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_3" style=
    "color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
    aa

        <p style=
        "margin-left: 40px; font-size: 12px; color: #ccc;">
        No pages yet.</p>
    </li>
</ol>

The formatting is a bit shit, since it is generated by PHP. Feel free to suggest new classes and stuff if this will not do.

In the database I have 3 fields "position", "parent_id" and "menu_id". Position being the position in the list, parent_id is the id of the item it is nestled in and menu_id the menu in which it is in (In the screenshot you will notice different menus). All of these values have to update when you move an element.

Now, I understand this might be a lot of work, so I do not expect anyone to just hand me the code. I would very much appreciated if someone could help me out, in any way.

Answer 1

I've done similar recently in ASP. This is the basic idea which you can customize to your needs:

The HTML list has attribute iden which is the record id in the database:

<li iden="<%=rs("ID")%>" class="ui-state-default"><%=rs("TITLE")%></li>

The Javascript runs off the update event:

$("#order-block1").sortable({
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true,
        update: function( event, ui ) {
            var t = ""
            $(this).children('li').each(function(index, element) {
                t+= "UPDATE PROJECTS SET RANK = '" + (index+1) + "' WHERE ID =" + $(this).attr('iden') + ";"
            });

            $.ajax({
                url: 'updateOrder.asp?str=' + t, type: 'POST',
                success: function(data) {
                },
                error: function() {
                    alert('error updating order');
                }
            });
        }
    });

The server side (updateOrder.asp) could look something like:

set conn=Server.CreateObject("ADODB.Connection")
conn.Open db

str = request.QueryString("str")

a = split(str, ";")

for each x in a

    on error resume next

    conn.Execute x

next

conn.close

It basically creates a string with SQL code which is then split on the ; and using a loop, executing each sql command.