Jqueryui sortable list with ajax update - php

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

Answer 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