Lista sortowalna Jqueryui z aktualizacją ajax

Question

Używam CodeIgniter z widżetem JQuery UI do sortowania, aby zmienić pozycję mojej listy menu.

Na przykład, jeśli moja lista menu jest tak:

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

chcę stawiać pierwsze menu pod drugą i to tam pozostać.

Jednak utknąłem na jQuery.

To jest to, co dostaje elementów listy:

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

i jquery:

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

udało się zaalarmować tablicę wyników.

Teraz nie chcę, aby ktoś napisał to dla mnie, tylko podpowiedź, jak używać ajax z tym dla aktualizacji.

Answer 1

Myślę, że możesz użyć $ .ajax (..) wewnątrz metody aktualizacji.

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

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

ja po prostu sprawdzić informacje już w odcinkach, więc to powinno działać. Możesz dodać właściwość method w zależności od typu wysyłania (post, get).

Answer 2

Przede wszystkim dzięki za Kamil Lach dla swojego cienia, udało mi się zrobić to

Oto mój kod może ktoś wull uczynić ją wykorzystać

stworzył funkcję w moim kontrolera i załadowany model w nim

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

    } 

} 

dolarów p vaiabl e jest pozycja krótka i id jest identyfikator menu

i 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(); 

Zdałem URL do mojej funkcji kontrolera gdzie mój model aktualizacja jest załadowany

i plik widoku

<?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"; 
    } 

    ?> 

I jeszcze raz dzięki za podpowiedź Kamil Lach