Jqueryui sortable list with ajax update

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.

Solution 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).

Solution 2

First of all thanks for Kamil Lach for his hint, i managed to do it

Here is my code maybe someone wull make a use for it

created a function in my controller and loaded the model in it

function sort_items()
{
    $this->load->model("admin/pages_model");
    $this->pages_model->sort_insert();
}

the model

function sort_insert()
{
    foreach($this->input->post("sort")  as $p => $id)
    {
        $this->db->query(" UPDATE c_pages SET sort = ".$p." WHERE pid = ".$id." ");

    }   

}

the $p vaiable is the short position and the id is the menu id

and the jquery

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight",
        opacity: 0.6,
    update: function(event, ui) {
        var info = $(this).sortable("serialize");
        $.ajax({
            type: "POST",
            url: "http://localhost/frame/admin/pages/sort_items",
            data: info,
            context: document.body,
            success: function(){
                // alert("cool");
            }
      });

    }
    });
    $( "#sortable" ).disableSelection();

i passed the url to my controller function where my update model is loaded

and the view file

<?php  if($rows) { ?>
    <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>
    <?php } else
    {
        echo "There are no pages created yet";
    } 

     ?>

And thanks again for your hint Kamil Lach

Comments

[Giles Roberts]

Just in case you're not aware, I believe your function sort_insert is open to sql injection attacks. php.net/manual/en/security.database.sql-injection.php