yii2：使用 ajax 在可排序的 jquery 中调用控制器操作答案

【问题标题】：yii2: call controller action in sortable jquery with ajaxyii2：使用 ajax 在可排序的 jquery 中调用控制器操作
【发布时间】：2015-08-04 05:08:31
【问题描述】：

我正在使用jquery sortable plugin 拖放项目并设置它们的顺序。但我无法得到 Ajax 的响应。我想从js 调用控制器操作，这样当我拖放项目时，应该会有响应。拖放功能运行良好。
我试过这个：
我的观点：

<div class="status-index info">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a('Create Status', ['create'], ['class' => 'btn btn-success']) ?>
    </p>
    <ul class="sortable_status">
    <?php
        $items = StatusType::find()->orderBy('order')->all();
        //var_dump($items);exit;
            //$content = array();
        foreach ($items as $item) {

            echo '<li class="text-items"><label for="item'.$item->order.'"><span class="items-number">'.$item->order.'</span></label>
                    <label id="item'.$item->order.'" />'.$item->title.'</label>
                    <br/>
                </li>';
         }
?>
</ul>
</div>

JS：

$(function  () {
    var LI_POSITION = 'li_position';
  $("ul.sortable_status").sortable({
     update: function(event, ui) {
              //create the array that hold the positions...
              var order = []; 
                //loop trought each li...
               $('.sortable_status li').each( function(e) {

               //add each li position to the array...     
               // the +1 is for make it start from 1 instead of 0
              order.push( $(this).attr('id')  + '=' + ( $(this).index() + 1 ) );
              });
              // join the array as single variable...
              var positions = order.join(';')
               //use the variable as you need!
              alert( positions );
             // $.cookie( LI_POSITION , positions , { expires: 10 });
            }
  /*handle : '.handle',
update : function () {
var order = $('.sortable_status').sortable('serialize');
$(".info").load("process-sortable.php?"+order);
} */
  });
});

控制器：

public function actionSortable()
    {
       /* foreach ($_GET['text-items'] as $position => $item)
            {
            $sql[] = "UPDATE `status_type` SET `order` = $position WHERE `id` = $item";
            }*/

            if ( isset( $_COOKIE['li_position'] ) ) {
            //explode the cockie by ";"...
            $lis = explode( ';' , $_COOKIE['li_position'] );
            // loop for each "id_#=#" ...
            foreach ( $lis as $key => $val ) {
            //explode each value found by "="...
            $pos = explode( '=' , $val );
            //format the result into li...
            $li .= '<li id="'.$pos[0].'" >'.$pos[1].'</li>';
            }
            //display it
            echo $li;
            // use this for delete the cookie!
            // setcookie( 'li_position' , null );
            } else {
            // no cookie available display default set of lis
             echo '
              empty
            ';
            }
    }

【问题讨论】：

一个小建议——在实现这样的功能之前，也许最好先看看现有的解决方案？检查我的yii2-sortable 分机。

标签： ajax yii2 jquery-ui-sortable

【解决方案1】：

为什么不在停止时使用 ajax 调用？

$("ul.sortable_status").sortable({
    stop: function(event, ui) {
        $.ajax({
            type: "POST",
            url: myUrl
            data: {my-data: "any-value"}
        })
        .success(function(data) {
            //your logic here
        })
       .fail(function() {
           //your logic here
        });
    }        
});

我曾经在我的 html 头标签的布局中定义我的变量如下

<head>
    <script>
        var myUrl = "<?php echo Url::to(['controller/action']); ?>";
    </script>
</head>

【讨论】：