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

Question

我尝试在 Wordpress 中按 post 基础更改分类术语的顺序。在编辑 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);
}

似乎没有更新自定义字段。

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()，但您可以传入一个名称空间以用于该代码块。例如，使用 jQuery(function($){}) 将允许您使用 $("#the-terms")。

我将列表的集合拆分成它自己的函数只是为了更容易调用，它 returns 字符串。

更新

对于您的 PHP，请考虑以下事项。

示例Post：

{
  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);
}

The status 0 is used to terminate the program successfully.

https://www.php.net/manual/en/function.exit.php

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

Saving jQuery UI Sortable order in Wordpress Backend

javascript

ajax

wordpress

jquery

jquery-ui