帶有ajax更新的Jqueryui可排序列表

Question

我正在使用CodeIgniter和jQuery UI Sortable小部件來更改我的菜單列表位置。

例如，如果我的菜單列表是這樣的：

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

我想把第一個菜單放在第二個菜單下，讓它留在那里。

但是我有點困在jQuery上。

這是獲取列表元素的原因：

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

和jquery：

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

我設法提醒結果陣列。

現在我不希望任何人為我寫這個，只是暗示如何使用ajax進行更新。

Answer 1

我認為您可以在更新方法中使用$ .ajax（..）。

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

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

我只是檢查信息已經序列化，所以這應該工作。 您可以根據提交類型（post，get）添加method屬性。

Answer 2

首先感謝Kamil Lach的暗示，我設法做到了

這是我的代碼，也許某人wull使用它

在我的控制器中創建了一個函數並將模型加載到其中

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

該模型

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是空頭頭寸，id是菜單ID

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

我將url傳遞給我的控制器函數，我的加載了更新模型

和視圖文件

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

     ?>

再次感謝您的暗示Kamil Lach