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.
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).
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With