Jquery UI Sortable Update Not Firing - php

Question

I have been unable to get the Jquery Sortable to trigger an update when the sortable objects are moved. As a prefix - I have spent hours combing this site and the JQuery site trying to fix this problem and have yet to find a successful solution. For whatever reason the update: option does not work.
I am creating a CMS for a site, and have several AJAX scripts to dynamically update my form, as well as a TinyMCE integration. One of the AJAX calls a php script which generates the content for the Jquery Sortable to use. The Jquery Sortable is used to rearrange the positions of various pages. When it is updated it is supposed to use AJAX to run a php function that separates out the data and returns hidden fields for my form validation scripts to use. For testing purposes, right now it also returns visible text. Thank you in advance for your help
I have tried both methods in the Jquery API docs for determining when an update takes place. Here is my Jquery script.
$( 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();});
Here is a snippet of the 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
<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."\">"; }
And here is how I am loading in Jquery:
<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

For manually triggering events in jquery-ui sortable, instead of specifying the handler in options object, you need to bind the event handler after sortable initialization.
For example the following won't work.
$('#sortable').sortable({
update: function () {
console.log('update called');
}
});
$('#sortable').trigger('sortupdate'); // doesn't work
Following works.
$('#sortable').sortable();
$('#sortable').on('sortupdate',function(){
console.log('update called');
});
$('#sortable').trigger('sortupdate'); // logs update called.