亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

富國滬深 2023-12-14 16:58:47
我嘗試更改 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 開發完全陌生。我應該怎么做才能在單擊按鈕時將條款訂單保存到數據庫?
查看完整描述

1 回答

?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

我首先看到的是有一些未定義的東西:

  • 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


查看完整回答
反對 回復 2023-12-14
  • 1 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號