Danh sách sắp xếp Jqueryui có cập nhật ajax

Question

Tôi đang sử dụng CodeIgniter với tiện ích con Sắp xếp giao diện người dùng jQuery, để thay đổi vị trí danh sách menu của tôi.

Ví dụ, nếu danh sách trình đơn của tôi là như thế này:

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

tôi muốn đặt trình đơn đầu tiên theo thứ hai và có nó ở lại đó.

Tuy nhiên, tôi bị kẹt trên jQuery một chút.

Đây là những gì được các yếu tố danh sách:

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

và jquery:

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

tôi quản lý để cảnh báo các mảng của các kết quả.

Bây giờ tôi không muốn bất cứ ai viết điều này cho tôi, chỉ là một gợi ý về cách sử dụng ajax với điều này để cập nhật.

Answer 1

Tôi nghĩ bạn có thể sử dụng $ .ajax (..) bên trong phương thức cập nhật của mình.

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

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

tôi chỉ kiểm tra thông tin đã đăng, vì vậy đây sẽ làm việc. Bạn có thể thêm thuộc tính method tùy thuộc vào loại gửi (bài đăng, nhận).

Answer 2

Trước hết cảm ơn cho Kamil Lạch cho gợi ý của mình, tôi cố gắng làm điều đó

Đây là mã của tôi có lẽ ai đó wull làm cho việc sử dụng cho nó

tạo một hàm trong bộ điều khiển của tôi và nạp các mô hình trong đó

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

mô hình

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

    } 

} 

các $ p vaiabl e là vị trí ngắn và id là id đơn

và 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 thông qua url để chức năng điều khiển của tôi, nơi mô hình cập nhật của tôi được nạp

và tập tin xem

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

    ?> 

Và cảm ơn gợi ý của bạn Kamil Lach