在 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

我首先看到的是有一些未定义的东西：

• 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