Jquery UIソート可能な更新が起動しない

Question

ソート可能なオブジェクトが移動されたときに更新をトリガーするJquery Sortableを取得できませんでした。プレフィックスとして - 私はこのサイトとこの問題を解決しようとしているJQueryサイトを組み合わせて時間を費やし、まだ成功した解決策を見つけていない。何らかの理由で更新：オプションは機能しません。

私はサイト用のCMSを作成しており、フォームを動的に更新するための複数のAJAXスクリプトと、TinyMCE統合を用意しています。 AJAXの1つは、Jquery Sortableのコンテンツを生成するPHPスクリプトを呼び出します。 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の抜粋です：

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のでロードしています方法です

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

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

EDIT ：#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でイベントを手動でトリガするには、オプションオブジェクトでハンドラを指定する代わりに、ソート可能な初期化の後にイベントハンドラをバインドする必要があります。

たとえば、次のコードは機能しません。

$('#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.