Solution 1 :

After multiple tries, I figure out the solution. When we use Thickbox we need to take care of HTML tags e.g id, class.

I was using ID inside ID so it was not correct. So I change it to

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

and problem solved.

Problem :

I am creating a plugin to show live courier tracking result in woocommerce shop orders page.

Based on Add a custom ajax button to WooCommerce admin orders list answer code to one of my previous questions, here is my new code attempt:

Adding Javascript code

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

Adding Tracking Column

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

Adding Tracking button in shop order column

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 request to get live tracking

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

As I am working with custom fields and curl response, I am adding the variable values below for the testing purpose

$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":"PAKISTANr","origin_city_name":"LAHORE","destination_city_name":"KARACHI","invoice_number":"IBLE5046889","invoice_date":"2021-01-14","shipment_name_eng":"Printed Mobile Covers","shipment_email":"[email protected]","shipment_phone":"03038518000","shipment_address":"HOUSE # 310 KAMRAN BLOCK ALLAMA IQBAL TOWN LAHORE","consignment_name_eng":"Saad","consignment_email":"[email protected]","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"}]}]}

The code works and displays data in the console but not in the output.

Can someone please guide what I did wrong?

Comments

Comment posted by Minimal, Reproducible Example

You need to parse the JSON data from ‘$response’ variable in the function

Comment posted by Hannah James

Sir, I have edited the question with missing details. Regards

Comment posted by loom.com/share/fde6b39e776c491a85233dedeceefdc3

@LoicTheAztec sir, I observed one more thing, in the shop order page if in screen option no of item per page = 1 then it displays the output perfectly. But If I set it to any number except 1 then it did not give output, it remains show data in the console. Video:

Comment posted by LoicTheAztec

You should add in your question an example of JSON output for

Comment posted by Hannah James

@LoicTheAztec sorry my bad, I have edited the question and provided the values that I am using in curl request and also $reponse output

By