Question

我无法让Jquery Sortable在移动可排序对象时触发更新。作为前缀 - 我花了几个小时梳理这个网站和JQuery网站试图解决这个问题，并且还没有找到一个成功的解决方案。无论出于何种原因，更新：选项都不起作用。

我正在为一个站点创建一个CMS，并有几个AJAX脚本来动态更新我的表单，以及一个TinyMCE集成。其中一个AJAX调用一个php脚本，它为Jquery Sortable生成要使用的内容。 Jquery Sortable用于重新排列各种页面的位置。当它被更新时，它应该使用AJAX来运行一个php函数来分离数据并返回隐藏字段以供我的表单验证脚本使用。出于测试目的，它现在也返回可见文本。提前感谢您的帮助

我已经在Jquery API文档中尝试了两种方法来确定何时进行更新。这是我的Jquery脚本。

$( function() {
$( "#sortable" ).sortable({
    update: function(event, ui){
        var list = new Array();
        $('#sortable').find('.ui-state-default').each(function(){
            var id=$(this).attr('data-id');    
            list.push(id);
        });
        var data=JSON.stringify(list);
        $.ajax({
            url: 'http://localhost/bpta/public2/ajax/np_order_ajax.php', // server url
            type: 'POST', //POST or GET 
            data: {token:'reorder',data:data}, // data to send in ajax format or querystring format
            datatype: 'json',
            success: function(data){
            $("#notes").html(data);
        }
        })  
    }
});
$( "#sortable" ).disableSelection();});

以下是html的片段：

 <h2>Create Page</h2>
<form action="newpage.php" method="post">
  <p>Menu name:
    <input type="text" onChange="" name="menu_name" value="" />
  </p>
  <p>Category:
    <select id="category" onClick="getParents(this.value)" name="category">
        <?php 
            $output = " ";
            $cat_set = find_all_categories(false);
            while ($cat = mysqli_fetch_assoc($cat_set)){
                $output .= "<option value=\"";
                $output .= htmlentities($cat["cat_id"]);
                $output .= "\">";
                $output .= htmlentities ($cat["cat_name"]);
                $output .= "</option>"; 
            }
            echo $output;
        ?>
    </select>
  </p>
  <div id="parent_page">

  </div>
  <div class ="position">

  </div>
  <div id = "notes">

  </div>
  <p>Visible:
    <input type="radio" name="visible" value="0" /> No
    &nbsp;
    <input type="radio" name="visible" value="1" /> Yes
  </p>
  <p>Content:<br />
    <textarea id="editable" name="content" rows="20" cols="80">This is a Test!</textarea>
  </p>
  <input type="submit" id="submit" name="submit" value="Create Page" />
</form>    <br />

np_order_ajax.php

if(isset($_POST['token'])){
$data=json_decode($_POST['data']);
$position =0;
$counter=1;
$query ="";
foreach($data as $key=>$val)
{
    if ($val == "new"){
        $position = $key;
    }else if ($val != "new"){
        $query.="UPDATE table_name SET position=".$counter." WHERE page_id=".$val."; ";
        //save_record($val,$counter);
    }
    echo "Key: $key; Value: $val \n";

    $counter++;}   
echo "<p>Reorder working!</p>"; 
echo "<input type=\"hidden\" name=\"update\" id=\"update\" value=\"".$query."\">"; 
echo "<input type=\"hidden\" name=\"position\" id=\"position\" value=\"".$position."\">"; }

以下是我在Jquery中加载的方式：

 <script type="text/javascript" src="../includes/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../includes/jquery-ui.js"></script>

编辑：#Sortable generation

<?php
        echo  ' 
    <ul id="sortable">';


        global $connection;

        $query = "SELECT * ";
        $query .= "FROM table_name ";
        $query .= "WHERE category=".$_REQUEST['category'];
        if ($_REQUEST['parent'] != "null" && $_REQUEST['parent'] !=null){
            $query .= " AND parent_page=".$_REQUEST['parent'];
        }
        $query .= " ORDER BY position ASC ";
        $page_set = mysqli_query($connection, $query) or die(mysqli_error($connection));

        while($result = mysqli_fetch_assoc($page_set)){
            $result_pg_name = $result['page_name'];
            $result_id = $result['page_id'];
            echo "<li class=\"ui-state-default\" data-id=\"".htmlentities($result_id)."\">".htmlentities($result_pg_name)."</li>";
            //echo "<li class=\"ui-state-default\">".htmlentities($result_pg_name)."</li>";
        }
        echo "<li class=\"ui-state-default\" data-id=\""."new"."\">"."New Page"."</li>";
        //echo ' <input type="hidden" name="pos" id="activities-input" />';
      echo '        </ul>';
?>

Answer 1

要手动触发jquery-ui sortable中的事件，而不是在options对象中指定处理程序，则需要在可排序初始化后绑定事件处理程序。

例如以下内容无法正常工作。

$('#sortable').sortable({
  update: function () {
    console.log('update called');
  }
});
$('#sortable').trigger('sortupdate'); // doesn't work

以下作品。

$('#sortable').sortable();
$('#sortable').on('sortupdate',function(){
   console.log('update called');
});
$('#sortable').trigger('sortupdate'); // logs update called.

Jquery UI可排序更新未触发

1 个答案: