WooCommerce Admin Order AJAX没有得到任何回应? [英] WooCommerce Admin Order AJAX Not Getting Any Response?

问题描述

更新:问题已解决！ AJAX可以工作，但是我有功能debug_to_console用于测试控制台日志中的哪个echo.功能如下:

Update: Issue resolved! The AJAX works but I had the function debug_to_console for testing which echo to the console log. Here is the function:

/* This is a function to print data to web browser console **
** Use debug_to_console( $data ); to print */
function debug_to_console( $data ) {
  $output = $data;
  if ( is_array( $output ) )
  $output = implode( ',', $output);

  echo "<script>console.log( 'Debug Objects: " . $output . "' );</script>";
}

在WooCommerce的管理订单页面上的

(WooCommerce>订单>编辑)，我添加了自定义字段，以向该订单添加自定义费用.我正在关注这篇文章添加AJAX ，但是它不起作用.我已经成功注册并排队了jQuery脚本add-custom-fee.js，并且在大多数情况下都可以使用，但是我完全没有收到响应.

on WooCommerce's admin order page (WooCommerce > Orders > Edit) I added custom fields to add a custom fee to the order. I'm following this article to add AJAX but it's not working. I successfully registered and enqueued my jQuery script add-custom-fee.js and for the most part it works, but I do not receive a response at all.

在管理订单页面上，我在自定义字段下方添加了以下链接以触发AJAX:

On the admin order page, I added the following link below my custom fields to trigger the AJAX:

$nonce = wp_create_nonce('add_custom_fee_nonce');
$link = admin_url('admin_ajax.php?action=add_custom_fee&post_id=' . $order->id . '&nonce=' . $nonce );
echo '<a class="add-custom-fee" data-nonce="' . $nonce . '" data-post_id="' . $order->id . '" href="' . $link . '">Add fee?</a>';

这是我注册和排队脚本的方式:

Here is how I registered and enqueued my script:

add_action('admin_enqueue_scripts', 'load_add_custom_fee_ajax_js');
function load_add_custom_fee_ajax_js( $hook ) {

  // Deprecated; append datetime as version number of script
  //$my_js_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/add-custom-fee.js' ));

  // Only register and enqueue on order edit page
  if ( 'post.php' == $hook || 'edit.php' == $hook ) {

    global $post;

    if ('shop_order' === $post->post_type) {
      wp_register_script( 'add-custom-fee', get_stylesheet_directory_uri() . '/js/add-custom-fee.js', array('jquery'), 1.0, true );

      // enqueue the JavaScript file
      wp_enqueue_script( 'jquery' );
      wp_enqueue_script( 'add-custom-fee');

      // localize the script to reference admin-ajax URL
      wp_localize_script( 'add-custom-fee', 'myAjax', array( 'ajaxurl' => admin_url('admin-ajax.php') ) );
    }
  }
}

这是我的jQuery脚本:

And here is my jQuery script:

jQuery(document).ready(function () {
  console.log("Hello world! Add custom fee JS script enqueued!");
});

/* START of code to add a custom fee to the order in admin and recalculate */
jQuery(document).ready(function ($) {

  $('.add-custom-fee').click( function(e) {
    e.preventDefault();

    console.log("Add fee toggle change detected! Grabbing values...");

    // var ajaxurl = 'https://staging1.orderpantry.com/wp-admin/admin-ajax.php';
    var add_fee_toggle = $("input[name='add_fee_toggle']:checked").val();
    var add_fee_name = $("input[name='add_fee_name']").val();
    var add_fee_percentage = $("input[name='add_fee_percentage']").val();

    console.log("Toggle? " + add_fee_toggle + ". Fee name: " + add_fee_name + ". Fee percentage: " + add_fee_percentage + "%");

    // Remove cookie and do not apply fee
    if (add_fee_toggle == '') {

      // Clear the fee fields
      $("input[name='add_fee_toggle'][value='']").prop('checked', true);
      $("#add_fee_name").val('');
      $("#add_fee_percentage").val('');

      console.log('Fee not added!');
      $('button.calculate-action').trigger('click'); // <-- trigger recalculate order
      //$('button.save-action').trigger('click');       <-- trigger saving order
    } else {

      order_id = $(this).attr('data-post_id');
      nonce = $(this).attr('data-nonce');

      console.log("This order's ID is " + order_id + " and its nonce is " + nonce);

      // Push fee values to AJAX function
      $.ajax({
        type: 'post',
        dataType: 'json',
        url: myAjax.ajaxurl,
        data: {
          action: 'create_fee_object',
          order_id: order_id,
          nonce: nonce,
          add_fee_toggle: add_fee_toggle,
          add_fee_name: add_fee_name,
          add_fee_percentage: add_fee_percentage
        },
        success: function(response) {
          if ( response.type == 'success' ) {
            console.log('Success! AJAX request received!');
            // Trigger the order to recalculate on success
            $('button.calculate-action').trigger('click');
          } else {
            alert('An error has occurred while adding your fee.');
            $('button.calculate-action').trigger('click');
          }
        }

      });
    }
  });
});

我没有收到任何回应，成功或失败.该代码似乎只是在这里停止工作.

I do not receive any response, success or failure. The code seem to just stopped working here.

这是我的PHP代码:

add_action('wp_ajax_create_fee_object', 'create_fee_object');
add_action('wp_ajax_nopriv_create_fee_object', 'please_login');
function create_fee_object() {

  if ( !wp_verify_nonce( $_REQUEST['nonce'], 'add_custom_fee_nonce' ) ) {
    exit("Unsecured access detected!");
  }

  debug_to_console( "Add fee data reached AJAX function!" );

  // Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $result['type'] = 'success';
    $result = json_encode($result);
    echo $result;
  } else {
    header("Location: ".$_SERVER["HTTP_REFERER"]);
  }

  die();
}

function please_login() {
  alert("You must log in to do this.");
  die();
}

我认为函数create_fee_object不起作用，或者AJAX POST无法实现.

I don't think the function create_fee_object works or AJAX POST is not reaching it.

任何想法导致它无法正常工作吗?谢谢！

Any idea what is causing it to not work? Thank you!

推荐答案

答案:删除debug_to_console( "Add fee data reached AJAX function!" );.

假设您从此SO帖子复制了debug_to_console，那么您将在预期的响应内容上方打印<script>标签，因此您不仅不会在回调中看到预期的数据，而且success回调也将 NOT 触发.为什么?因为您已经告诉$.ajax(通过dataType: 'json')期望JSON，但是jQuery在尝试将返回的内容解析为JSON时抛出错误.

Assuming that you copied debug_to_console from this SO post then you are printing a <script> tag above your intended response content, so not only are you not going to see your intended data in your callback, but your success callback will NOT fire at all. Why? Because you've told $.ajax to expect JSON (via dataType: 'json'), but jQuery throws an error while attempting to parse your returned content as JSON.

这篇关于WooCommerce Admin Order AJAX没有得到任何回应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！