Saving jQuery UI Sortable order in Wordpress Backend

Question

I try to change the order of the taxonomy terms per post basis in Wordpress. On EDIT POST page, I've created a metabox containing custom taxonomy terms and managed to make them sortable via Jquery.

This is my list on Wordpress backend :

 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>

This works so far. But when I try to save the order of taxonomy terms with click on the button, it throws:

[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)

My question:

I am completely new to Jquery and PHP development. What should I do to save the terms order to the database on button click?

EDIT: I am using this ajax function to save the order as a custom field:

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

It doesn't seem to update the custom fields.

Answer 1

The first thing I see is that there are a few things undefined:

• ajaxurl
• ajax_response()

Those will need to be defined before this script runs.

Here is an example that might help you.

 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 uses jQuery() but you can pass in a NameSPace to use for that code block. Using jQuery(function($){}) will allow you to use $("#the-terms") for example.

I split the collection of the list into it's own function just to make it easier to call, it returns the String.

Update

For your PHP, consider the following.

Example Post:

{
  action: "save_term_order",
  cache: false,
  post_id: "3001",
  order: "term-816,term-1034,term-895"
}

If you want to add 8161034895 to your database, try this.

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