Сортируемый список Jqueryui с обновлением ajax

#php #jquery #ajax #codeigniter #jquery-ui-sortable

#php #jquery #ajax #codeigniter #jquery-ui-сортируемый

Вопрос:

Я использую CodeIgniter с виджетом сортировки пользовательского интерфейса jQuery, чтобы изменить положение в списке меню.

Например, если мой список меню выглядит следующим образом:

 <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 с этим для обновления.

Ответ №1:

Я думаю, вы можете использовать $.ajax(..) внутри вашего метода обновления.

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

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

Я просто проверяю, что информация уже сериализована, так что это должно сработать. Вы можете добавить method свойство в зависимости от типа отправки (post, get).

Ответ №2:

Прежде всего, спасибо Камилю Лаху за его подсказку, мне удалось это сделать

Вот мой код, может быть, кто-нибудь воспользуется им

создал функцию в моем контроллере и загрузил в нее модель

 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 — это короткая позиция, а идентификатор — идентификатор меню

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

     ?>
  

И еще раз спасибо за вашу подсказку, Камил Лач

Комментарии:

1. На всякий случай, если вы не в курсе, я полагаю, что ваша функция sort_insert открыта для атак с использованием sql-инъекций. php.net/manual/en/security.database.sql-injection.php