Geek Answers Handbook

Jqueryui sort list with ajax update

I am using CodeIgniter with jQuery UI Sortable widgets to reposition the menu list.

For example, if my menu list looks 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 leave it there.

However, I got a little fixated on jQuery.

Here's what the list items get:

  <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-ns"></span> ' . $r->page_name . ' </li>'; } ?> </ul>

and 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 warn an array of results.

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

+7
source share
2 answers

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 the information is already serializable, so this should work. You can add the method property depending on the type of send (post, get).

+4
source

First of all, thanks for Camille Lach for his hint, I managed to do it

Here is my code, maybe someone wull will make use for it

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

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

model

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

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

and 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 of my controller function where my update model is loaded

and 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-ns"></span> ' . $r->page_name . ' </li>'; } ?> </ul> <?php } else { echo "There are no pages created yet"; } ?>

And thanks again for your hint Camil Lach

+3
source

More articles:


All Articles