Question

我正在使用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
            ';
            }
    }

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

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

1 个答案: