Onclick Link POST to REST - php

Question

I'm making sure I am going about this the right way because WooCommerce kinda complicates things. First I'll explain what I am looking for. I'm wanting it so when an admin clicks a custom button I created in the WooCommerce orders page that it shows them the tracking number for a specific order. I have that up and running just fine. Now what I would also like to do is to make a call to my api with their username and post it to my log with the admin username along with the tracking number they accessed. However I'm running into a couple issues, some of which I haven't encountered yet, but feel as though they could be a problem. So I have the link in one function that loops through each order to display the tracking button, and the css/ajax in another function for being posted in the head section. So here are some issues:
1.) How can I make it so that I only need one instance of jQuery? I don't want it to flood the source code with multiple instances.
2.) I thought maybe just posting it once in the head section would be fine, but if it's not in the link button function then how will the jQuery get the correct value if the variable is different for each order id since it would no longer be looping through each instance with the jQuery?
3.) How could I accomplish this call from another host so I do not need to upload my API to each domain?
Here is the code I have so far, please tell me if there is a better way to go about this task. Thank you in advance.
add_action( 'woocommerce_admin_order_actions_end', 'add_custom_order_actions_button', 100, 1 );
function add_custom_order_actions_button( $order ) {
// Username
$user_info = get_userdata($order->user_id);
// Tracking
$tracking_number = get_post_meta( $order->get_id(), '_disquy_tracking_number', true );
if( empty($tracking_number) ) return;
// Prepare the button data
$url = esc_url('https://track.disquy.com/'.$tracking_number.'?');
$name = esc_attr( __('Tracking', 'woocommerce' ) );
$class = esc_attr( 'tracking' );
printf( '<a class="button wc-action-button wc-action-button-%s %s" href="%s" title="%s" id="apicall">%s</a>', $class, $class, $url, $name, $name );
}
add_action( 'admin_head', 'add_custom_order_actions_button_css' );
function add_custom_order_actions_button_css() {
echo '<script type="text/javascript">
$("#apicall").click(function(event){
event.preventDefault();
$.post("adminlog.php", {username : ' . $user_info . ', tracking : ' . $tracking_number . '}, function(response){
alert(response);
});
});
</script>
<style>.wc-action-button-tracking::after { font-family: woocommerce !important; content: "\e01a" !important; }</style>
}

Answer 1

Actually, you don't need jQuery at all! It's been awhile since I've worked with PHP based CMS's, but here's an alternative example to what you could do. Just check the PHP syntax to make sure it's correct. No jQuery. Pure vanilla JS. Uses native Fetch API to handle AJAX request.
add_action( 'woocommerce_admin_order_actions_end', 'add_custom_order_actions_button', 100, 1 );
function add_custom_order_actions_button( $order ) {
// UserID
$user_id = get_userdata($order->user_id);
// Tracking Data
$tracking_data = get_post_meta($order->get_id(), '_disquy_tracking_number', true );
if(empty($tracking_data)) return;
$base_url = 'https://track.disquy.com';
$url = esc_url(.$base_url.'/'.$tracking_data.'?');
$name = esc_attr( __('Tracking', 'woocommerce' ) );
$class = esc_attr( 'tracking' );
printf('<a class="button wc-action-button wc-action-button-
%s %s" href="%s" title="%s" id="apicall">%s</a>',
$class, $class, $url, $name, $name );
}
add_action( 'admin_head', 'add_custom_order_actions_button_css' );
function add_custom_order_actions_button_css() {
echo '<script type="text/javascript">
const elem = document.getElementById('#apicall')
elem.addEventListener('click', postUserTransaction)
const postUserTransaction = (e) => {
e.preventDefault();
const postData (e) => {
event.preventDefault();
const tittle = elem.title;
const body = document.body.value;
return fetch('adminlog.php', {
method: 'POST',
headers : new Headers({
"username":".$user_id.",
"tracking":".$tracking_data.'
})
})
.then(res => res.json())
.then(data => data)
.then(data => {
console.log(data)
alert(data)
return data
})
.catch(err => new Error(err))
}
}
</script>
<style>.wc-action-button-tracking::after { font-family: woocommerce !important; content: "\e01a" !important; }</style>
}
By using the addEventListener method instead of defining the onclick method inline your HTML. You should be able to write all your JS scripts in a separate folder, then import them using hooks. Again, it's been awhile though. If you're looking for dynamic rendering of DOM variables, jQuery wont work. It only works with a rendered DOM. Vanilla JS can take care of this for you, but you'll need aditional configs. I honestly think there has to be hooks included using PHP for inject DOM elements on update. Then simple write eventListeners for changes in the DOM, then make necessary updates.
As mentioned before, include your scripts files elsewhere, then hook them into the page via PHP and your WooCommerce API for doing so.
Cheers!
EDIT:
You need to modify the fetch and promise chain to POST you PHP script, then edit the then block containing the alert to add the response data to the DB. Here is another example using fetch to POST with PHP. I don't know what vars and hooks you have to work with to make the final DB update using your Res data. That's something you should have.
fetch("http://www.example.org/submit.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "key=val&key2=val2"
})
.then(res => res.json()),
.then(res => {
if (res.ok) {
alert("Perfect! Your settings are saved.");
} else if (res.status == 401) {
alert("Oops! You are not authorized.");
}
}, (e) => {
alert("Error submitting form!");
});