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.
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?
Sir, I have edited the question with missing details. Regards
@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:
@LoicTheAztec sorry my bad, I have edited the question and provided the values that I am using in curl request and also $reponse output