Question

I am using CodeIgniter with the jQuery UI Sortable widget, to change my menu list position.

For example, if my menu list is like this:

<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>

I want to place the first menu under the second and have it stay there.

However I am stuck on the jQuery a bit.

This is what gets the list elements:

 <ul id="sortable"> 
    <?php  foreach ($rows as $r)
    {
        echo '
        <li id="sort_'.$r->pid.'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 
            ' . $r->page_name . '
        </li>';
    }

    ?>
</ul>

and the jquery:

$( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    opacity: 0.6,
    update: function(event, ui) {
        var info = $(this).sortable("serialize");
        alert(info);
    }
});
$( "#sortable" ).disableSelection(); 

I managed to alert the array of the results.

Now I don’t want anybody to write this for me, just a hint on how to use ajax with this for the update.

Answer 1

I think you can use $.ajax(..) inside your update method.

http://api.jquery.com/jQuery.ajax/

$.ajax({
  url: "submit.php",
  data: info,
  context: document.body,
  success: function(){
    // success
  }
});

I just check info is already serialized, so this should work. You can add method property depending on submit type (post, get).