Woocommerce 订单动态输出数据在 WordPress Thickbox 中不起作用

Question

我正在创建一个插件来在 woocommerce 商店订单页面中显示实时快递跟踪结果。

基于 Add a custom ajax button to WooCommerce admin orders list 对我之前的一个问题的回答代码，这是我的新代码尝试：

添加 Javascript 代码

add_action( 'admin_head', 'admin_footer_tracking_js' );
function admin_footer_tracking_js() {
    global $pagenow;
    if ( $pagenow === 'edit.php' && isset($_GET['post_type']) && 'shop_order' === $_GET['post_type'] ) :
    ?>
    <script type='text/javascript'>
    function trackParcel(orderId, parcelId){
         jQuery.ajax({
                type: 'POST',
                url: '<?php echo admin_url('/admin-ajax.php'); ?>',
                data: {
                    'action':   'mark_message_as_read',
                    'dvs_order_id' : orderId,                    
                    'dvs_courier_tracking' : parcelId,
                },
                success: function (response) {
                    console.log(response);
                    jQuery('#track-thickbox').html(response);
                }
            });
    }

    </script>
    <?php
    endif;
}

添加跟踪栏

// add new column in admin order Tracking
add_filter( 'manage_edit-shop_order_columns', 'dvs_add_tracking_admin_list_column' );
function dvs_add_tracking_admin_list_column( $columns ) {
    $columns['dvs_show_tracking'] = 'Tracking';
    return $columns;
}

在车间订单栏中添加跟踪按钮

add_action( 'manage_shop_order_posts_custom_column', 'dvs_add_tracking_admin_list_column_content' );
function dvs_add_tracking_admin_list_column_content( $column ) {
    global $post;
    if ( 'dvs_show_tracking' === $column ) {
        $order = wc_get_order( $post->ID );
        $dvs_show_courier_list = get_post_meta( $order->get_id(), '_dvs_courier_list', true );
        $dvs_show_courier_tracking = get_post_meta( $order->get_id(), '_dvs_courier_tracking', true );
        add_thickbox();
        echo'<a href="#TB_inline?width=600&height=550&inlineId=my-content-id" id="thickBoxLink" class="woocommerce-Button button thickbox" onclick="trackParcel(\'' . $order->get_id() . '\', \'' . $dvs_show_courier_tracking . '\')">Tracking</a>';

        ?>  
        <div id="my-content-id" style="display:none;">
        <p id='track-thickbox'>
        </p>
        </div>
        <?php
    }
}

Curl 请求获取实时跟踪

add_action('wp_ajax_mark_message_as_read', 'get_mark_message_as_read');
function get_mark_message_as_read() {
    $order = $_POST['dvs_order_id'];
    $tracking = $_POST['dvs_courier_tracking'];

    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, 'http://new.leopardscod.com/webservice/trackBookedPacket/format/json/');
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, array(
        'api_key' => 'xxx',
        'api_password' => 'xxx',
        'track_numbers' => 'LE783655225'
    ));
    $response = curl_exec($curl);
    curl_close($curl);

    echo $response; // Send data back to JS
    die();
}

当我使用自定义字段和 curl 响应时，我将添加下面的变量值用于测试目的

$dvs_show_courier_list = 'Leopards Courier'

$dvs_show_courier_tracking = 'LE783655225'

$response = {"status":1,"error":0,"packet_list":[{"booked_packet_id":"31134748","booking_date":"06\/01\/2021","track_number":"LE783596151","track_number_short":"783596151","booked_packet_weight":"250","arival_dispatch_weight":"33","booked_packet_vol_weight_w":"0","booked_packet_vol_weight_h":null,"booked_packet_vol_weight_l":null,"booked_packet_no_piece":"1","booked_packet_collect_amount":"1000.00","booked_packet_order_id":"10564","origin_country_name":"PAKISTAN\r","origin_city_name":"LAHORE","destination_city_name":"KARACHI","invoice_number":"IBLE5046889","invoice_date":"2021-01-14","shipment_name_eng":"Printed Mobile Covers","shipment_email":"hello@covers.pk","shipment_phone":"03038518000","shipment_address":"HOUSE # 310 KAMRAN BLOCK ALLAMA IQBAL TOWN LAHORE","consignment_name_eng":"Saad","consignment_email":"saadaftab1990@gmail.com","consignment_phone":"03212568327","consignment_phone_two":"0","consignment_phone_three":"0","consignment_address":"Flat# A-38, 1st floor, Saghir Centre, FB area, Block 16","special_instructions":"Mobile Covers - Handle with care - Donot Add Fake Status - WhatsApp 03038518000","booked_packet_status":"Delivered","status_remarks":"Array\/Array","Tracking Detail":[{"Status":"Shipment picked in  LAHORE MAIN CITY","Activity_Date":"2021-01-07","Activity_Time":"00:32:08","Activity_datetime":"2021-01-07 00:32:08"},{"Status":"Dispatched to KHI MAIN OFFICE","Activity_Date":"2021-01-07","Activity_Time":"00:59:35","Activity_datetime":"2021-01-07 00:59:35"},{"Status":"Arrived at Station in KARACHI LOCAL","Reciever_Name":null,"Activity_Date":"2021-01-09","Activity_Time":"03:52:31","Reason":null,"Activity_datetime":"2021-01-09 03:52:31"},{"Status":"Arrived at Station in SOHRAB GOTH","Reciever_Name":null,"Activity_Date":"2021-01-09","Activity_Time":"08:12:57","Reason":null,"Activity_datetime":"2021-01-09 08:12:57"},{"Status":"Assigned to courier in SOHRAB GOTH","Reciever_Name":null,"Activity_Date":"2021-01-09","Activity_Time":"11:16:09","Reason":null,"Activity_datetime":"2021-01-09 11:16:09"},{"Status":"Delivered","Reciever_Name":"SAAD","Activity_Date":"2021-01-09","Activity_Time":"22:22:00","Reason":"SELF","Activity_datetime":"2021-01-09 22:22:00"}]}]}

代码工作并在控制台中显示数据，但不在输出中。

有人可以指导我做错了什么吗？

Answer 1

经过多次尝试，我找到了解决方案。当我们使用Thickbox时，我们需要处理HTML标签，例如id、class。

我在 ID 中使用了 ID，所以它不正确。所以我把它改成

<div id="my-content-id" style="display:none;">
 <p class='track-thickbox'>
 </p>
</div>

问题解决了。