在 WordPress 后端保存 jQuery UI 可排序顺序

Question

我尝试更改 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>

我的问题：

我对 Jquery 和 PHP 开发完全陌生。我应该怎么做才能在单击按钮时将条款订单保存到数据库？

Answer 1

我首先看到的是有一些未定义的东西：ajaxurlajax_response()这些需要在该脚本运行之前定义。这是一个可能对您有帮助的示例。jQuery(function($) {&nbsp; function getListOrder(tObj) {&nbsp; &nbsp; var list = $(tObj).sortable("toArray");&nbsp; &nbsp; return list.toString();&nbsp; }&nbsp;&nbsp;&nbsp; var ajaxUrl = "";&nbsp;&nbsp;&nbsp; // Make the term list sortable&nbsp; $("#the-terms").sortable({&nbsp; &nbsp; items: ".item",&nbsp; &nbsp; placeholder: "sortable-placeholder",&nbsp; &nbsp; tolerance: "pointer",&nbsp; &nbsp; distance: 1,&nbsp; &nbsp; forcePlaceholderSize: true,&nbsp; &nbsp; helper: "clone",&nbsp; &nbsp; cursor: "move",&nbsp; });&nbsp;&nbsp;&nbsp; // Save the order using ajax&nbsp; $("#save_term_order").on("click", function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var postID = $("#post_ID").val();&nbsp; &nbsp; var listOrder = getListOrder("#the-terms");&nbsp; &nbsp; console.log("List Order:", listOrder);&nbsp; &nbsp; $.post(ajaxUrl, {&nbsp; &nbsp; &nbsp; action: "save_term_order",&nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; post_id: postID,&nbsp; &nbsp; &nbsp; order: listOrder,&nbsp; &nbsp; &nbsp; success: true&nbsp; &nbsp; });&nbsp; &nbsp; return false;&nbsp; });});<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">&nbsp; <ul id="the-terms" class="ui-sortable">&nbsp; &nbsp; <li class="item" id="term-816">Item 1</li>&nbsp; &nbsp; <li class="item" id="term-895">Item 2</li>&nbsp; &nbsp; <li class="item" id="term-1034">Item 3</li>&nbsp; </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，请考虑以下事项。示例帖子：{&nbsp; action: "save_term_order",&nbsp; cache: false,&nbsp; post_id: "3001",&nbsp; order: "term-816,term-1034,term-895"}如果您想添加8161034895到数据库，请尝试此操作。add_action ( 'wp_ajax_save_term_order', 'term_order_save' );function term_order_save () {&nbsp; global $wpdb;&nbsp; $wpdb->flush ();&nbsp; $item_id = $_POST['post_id'];&nbsp; $meta_key = '_term_order';&nbsp; $int = preg_replace("/[^0-9]/", "", $_POST['order']);&nbsp; update_post_meta ( $item_id, $meta_key, array ( 'term_order' => $int ) );&nbsp; $response = '<p>Term order updated</p>';&nbsp; echo $response;&nbsp; die(0);}状态0用于成功终止程序。https://www.php.net/manual/en/function.exit.php