Сохранение порядка сортировки jQuery UI в Wordpress Backend

Я пытаюсь изменить порядок терминов таксономии для каждой публикации в 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 ); не имеет смысла. Ваша строка не будет содержать ', она будет содержать ,.

Twisty 18.12.2020 21:15

Спасибо за Ваш ответ. Вы очень помогли

bonsvr 18.12.2020 21:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
473
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info("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").

Я разделил коллекцию списка на собственную функцию, чтобы упростить вызов, она возвращает String.

Обновлять

Для вашего 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

Спасибо за Ваш ответ. Это устранило ошибки, которые были головной болью в течение нескольких дней. Однако сроки, похоже, еще не упорядочены.

bonsvr 18.12.2020 21:08

Я использую эту функцию ajax для сохранения заказа в качестве настраиваемого поля: add_action ('wp_ajax_save_term_order', 'term_order_save'); функция term_order_save () { глобальная $wpdb; $wpdb->сбросить (); $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, массив ('term_order' => $int)); $response = '<p>Срочный заказ обновлен</p>'; эхо $ответ; умереть (1); }

bonsvr 18.12.2020 21:08

@bonsvr не уверен, что вы подразумеваете под терминами, похоже, они еще не заказаны. Они будут в том порядке, в котором вы их перетащите, а затем нажмете кнопку. Вы должны увидеть порядок в своей консоли, и это то, что отправляется в сценарий. Если БД другая, значит что-то не так в скрипте обновления БД.

Twisty 18.12.2020 21:11

извините за сообщение с длинным кодом. Я обновил вопрос, добавив свой код PHP. Как вы думаете, есть несоответствие?

bonsvr 18.12.2020 21:12

Другие вопросы по теме