在 Wordpress 后端保存 jQuery UI 可排序顺序
Posted
技术标签:
【中文标题】在 Wordpress 后端保存 jQuery UI 可排序顺序【英文标题】:Saving jQuery UI Sortable order in Wordpress Backend 【发布时间】:2021-03-29 09:56:51 【问题描述】:我尝试在 Wordpress 中更改每个帖子的分类术语的顺序。在 EDIT POST 页面上,我创建了一个包含自定义分类术语的元框,并设法通过 Jquery 对其进行排序。
这是我在 Wordpress 后端上的列表:
jQuery(document).ready(function ()
// Make the term list sortable
jQuery("#the-terms").sortable(
items: ".item",
placeholder: "sortable-placeholder",
tolerance: "pointer",
distance: 1,
forcePlaceholderSize: true,
helper: "clone",
cursor: "move",
);
// Save the order using ajax
jQuery("#save_term_order").on("click", function ()
var postID = $("#post_ID").val();
jQuery.post(ajaxurl,
action: "save_term_order",
cache: false,
post_id: postID,
order: jQuery("#the-terms").sortable("toArray").toString(),
success: ajax_response(),
);
return false;
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="inside">
<ul id="the-terms" class="ui-sortable">
<li class="item" id="term-816">Item 1</li>
<li class="item" id="term-895">Item 2</li>
<li class="item" id="term-1034">Item 3</li>
</ul><a href="javascript: void(0); return false;" id="save_term_order" class="button-primary">Update Order</a>
</div>
到目前为止,这有效。但是当我尝试通过单击按钮来保存分类术语的顺序时,它会抛出:
[Error] ReferenceError: Can't find variable: ajax_response
(anonymous function) (post.php:249)
dispatch (load-scripts.php:2:43096)
[Error] SyntaxError: Return statements are only valid inside functions.
(anonymous function) (post.php:1)
[Error] TypeError: undefined is not an object (evaluating 'o.stack.indexOf')
(anonymous function) (common.min.js:2:131350)
each (load-scripts.php:2:2981)
onError (common.min.js:2:131320)
dispatch (load-scripts.php:2:43096)
我的问题:
我对 Jquery 和 PHP 开发完全陌生。单击按钮时,我应该怎么做才能将术语顺序保存到数据库中?
编辑:我正在使用这个 ajax 函数将订单保存为自定义字段:
add_action ( 'wp_ajax_save_term_order', 'term_order_save' );
function term_order_save ()
global $wpdb;
$wpdb->flush ();
$item_id = $_POST['post_id'];
$meta_key = '_term_order';
$order = $_POST[ 'order' ];
$str = str_replace ( "term-", "", $order );
$int = str_replace ( "'", "", $str );
update_post_meta ( $item_id, $meta_key, array ( 'term_order' => $int ) );
$response = '<p>Term order updated</p>';
echo $response;
die(1);
似乎没有更新自定义字段。
【问题讨论】:
php 行$int = str_replace ( "'", "", $str );
没有意义。您的字符串将不包含'
,它将包含,
。
感谢您的回答。你帮了很多忙
【参考方案1】:
我看到的第一件事是有几件事未定义:
ajaxurl
ajax_response()
这些将需要在此脚本运行之前定义。
这是一个可能对您有所帮助的示例。
jQuery(function($)
function getListOrder(tObj)
var list = $(tObj).sortable("toArray");
return list.toString();
var ajaxUrl = "";
// Make the term list sortable
$("#the-terms").sortable(
items: ".item",
placeholder: "sortable-placeholder",
tolerance: "pointer",
distance: 1,
forcePlaceholderSize: true,
helper: "clone",
cursor: "move",
);
// Save the order using ajax
$("#save_term_order").on("click", function(e)
e.preventDefault();
var postID = $("#post_ID").val();
var listOrder = getListOrder("#the-terms");
console.log("List Order:", listOrder);
$.post(ajaxUrl,
action: "save_term_order",
cache: false,
post_id: postID,
order: listOrder,
success: true
);
return false;
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="inside">
<ul id="the-terms" class="ui-sortable">
<li class="item" id="term-816">Item 1</li>
<li class="item" id="term-895">Item 2</li>
<li class="item" id="term-1034">Item 3</li>
</ul><a href="javascript: void(0); return false;" id="save_term_order" class="button-primary">Update Order</a>
</div>
WordPress 使用jQuery()
,但您可以传入 NameSPace 以用于该代码块。例如,使用jQuery(function($))
将允许您使用$("#the-terms")
。
我将列表的集合拆分为它自己的函数只是为了更容易调用,它返回字符串。
更新
对于您的 PHP,请考虑以下事项。
示例帖子:
action: "save_term_order",
cache: false,
post_id: "3001",
order: "term-816,term-1034,term-895"
如果您想将8161034895
添加到您的数据库中,请尝试此操作。
add_action ( 'wp_ajax_save_term_order', 'term_order_save' );
function term_order_save ()
global $wpdb;
$wpdb->flush ();
$item_id = $_POST['post_id'];
$meta_key = '_term_order';
$int = preg_replace("/[^0-9]/", "", $_POST['order']);
update_post_meta ( $item_id, $meta_key, array ( 'term_order' => $int ) );
$response = '<p>Term order updated</p>';
echo $response;
die(0);
状态0用于成功终止程序。
https://www.php.net/manual/en/function.exit.php
【讨论】:
感谢您的回答。它消除了几天来一直令人头疼的错误。但是,这些条款似乎还没有被订购。 我正在使用这个 ajax 函数将订单保存为自定义字段: add_action ( 'wp_ajax_save_term_order', 'term_order_save' );函数 term_order_save () 全局 $wpdb; $wpdb->flush (); $item_id = $_POST['post_id']; $meta_key = '_term_order'; $order = $_POST['订单']; $str = str_replace("term-", "", $order); $int = str_replace ("'", "", $str); update_post_meta ($item_id, $meta_key, array ('term_order' => $int)); $response = '定期订单更新
';回声$响应;死(1); @bonsvr 不确定您所说的 术语似乎尚未排序。 它们将按照您拖放它们然后点击按钮的任何顺序排列。您应该在控制台中看到订单,这就是发送到 Script 的内容。如果 DB 不同,则说明 DB 更新脚本有问题。 抱歉,代码太长了。我已经更新了问题,添加了我的 PHP 代码。你认为有不匹配吗?以上是关于在 Wordpress 后端保存 jQuery UI 可排序顺序的主要内容,如果未能解决你的问题,请参考以下文章