Php Jquery UI可排序更新未触发
我无法使Jquery Sortable在可排序对象移动时触发更新。作为前缀,我花了几个小时梳理这个站点和JQuery站点,试图解决这个问题,但还没有找到一个成功的解决方案。无论出于何种原因,update:选项都不起作用 我正在为一个站点创建一个CMS,有几个AJAX脚本可以动态更新我的表单,还有一个TinyMCE集成。其中一个AJAX调用一个php脚本,该脚本生成jquerysortable要使用的内容。Jquery排序表用于重新排列各种页面的位置。当它被更新时,应该使用AJAX来运行一个php函数,该函数分离数据并返回隐藏字段,供我的表单验证脚本使用。出于测试目的,现在它还返回可见文本。提前感谢您的帮助 我在jQueryAPI文档中尝试了这两种方法来确定何时进行更新。这是我的Jquery脚本Php Jquery UI可排序更新未触发,php,jquery,ajax,jquery-ui,jquery-ui-sortable,Php,Jquery,Ajax,Jquery Ui,Jquery Ui Sortable,我无法使Jquery Sortable在可排序对象移动时触发更新。作为前缀,我花了几个小时梳理这个站点和JQuery站点,试图解决这个问题,但还没有找到一个成功的解决方案。无论出于何种原因,update:选项都不起作用 我正在为一个站点创建一个CMS,有几个AJAX脚本可以动态更新我的表单,还有一个TinyMCE集成。其中一个AJAX调用一个php脚本,该脚本生成jquerysortable要使用的内容。Jquery排序表用于重新排列各种页面的位置。当它被更新时,应该使用AJAX来运行一个php
$( 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
<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."\">"; }
if(isset($\u POST['token'])){
$data=json_解码($_POST['data']);
$position=0;
$counter=1;
$query=“”;
foreach($key=>$val的数据)
{
如果($val==“新”){
$position=$key;
}否则如果($val!=“新”){
$query.=“更新表_名称集位置=”.$counter。“其中页面_id=”.$val.“;”;
//保存记录($val,$counter);
}
echo“Key:$Key;Value:$val\n”;
$counter++;}
echo“重新排序工作!”;
回声“;
回声“;}
下面是我在Jquery中加载的方式:
<script type="text/javascript" src="../includes/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../includes/jquery-ui.js"></script>
编辑:#可排序生成
<?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>';
?>
要在中手动触发事件,而不是在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.
对于在中手动触发事件,您需要在可排序初始化后绑定事件处理程序,而不是在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,但我尝试在移动可排序对象时执行ajax调用。但是每次
update:
中的代码运行时,您都可以手动调用它。是的,这就是我遇到的问题-update中的代码从未运行过。谢谢您的回答,但我不是在尝试手动触发更新。我不熟悉Jquery,但每当可排序对象被移动时,我都会尝试执行ajax调用。但是每次更新:
中的代码运行时,您都可以手动调用它。是的,这就是我遇到的问题-更新中的代码从未运行过。您能在中包含html吗,你在上面放了很多东西,但我看不到。你能把html放在这是“#sortable”
,你在上面放了很多东西,但我看不到。