How to Update Container using REST API through AJAX
REST API ROUTE: https://my-wordpress-site.com/wp-json/wpcargo/v1/api/my-api-key-here/container/update
First step, we need to create a form and populate it. Copy this code:
<form action="#" id="update-container"> <div id="update_container_section" class="col-md-12 mb-4"> <div class="card"> <section class="card-header"> Update Container Section </section> <section class="card-body"> <div class="row"> <section class=" col-md-12"> <div id="form-54" class="form-group "> <label for="__container_title">Container Title</label> <input id="__container_title" type="text" class="form-control __container_title" name="__container_title" value=""> </div> </section> <section class=" col-md-12"> <div id="form-55" class="form-group "> <label for="__container_location">Location</label> <input id="__container_location" type="text" class="form-control __container_location" name="__container_location" value=""> </div> </section> <section class=" col-md-12"> <div id="form-56" class="form-group "> <label for="__container_status">Status</label> <input id="__container_status" type="text" class="form-control __container_status" name="__container_status" value=""> </div> </section> <section class=" col-md-12"> <div id="form-57" class="form-group "> <label for="__container_remarks">Remarks</label> <input id="__container_remarks" type="text" class="form-control __container_remarks" name="__container_remarks" value=""> </div> </section> <section class=" col-md-12"> <div id="form-58" class="form-group "> <p>Update Assigned Shipments?</p> <ul> <li><input id="58-updateassignedshipments" type="checkbox" class="form-check-input __update_assigned_shipments" name="__update_assigned_shipments[]" value="Update Assigned Shipments?"> <label for="58-updateassignedshipments" class="form-check-label">Update Assigned Shipments?</label></li> </ul> </div> </section> <section class=" col-md-12"> <div id="form-59" class="form-group "> <button type="submit">Update Container</button> </div> </section> </div> </section> </div> </div> </form>
The form would look something like this: 
Second step, create a JavaScript file that will handle the submit event when the form submit button is clicked. Copy this code:
jQuery(document).ready( function( $ ){
$('form#update-container').on('submit', function( e ){
e.preventDefault();
let title = $( 'input[name="__container_title"]' ).val();
let location = $( 'input[name="__container_location"]' ).val();
let status = $( 'input[name="__container_status"]' ).val();
let remarks = $( 'input[name="__container_remarks"]' ).val();
let update_assigned_shipments = $( 'input[name="__update_assigned_shipments"]' ).is(':checked') ? true : false;
$.ajax({
type:"POST",
dataType:"JSON",
data:{
action:'update_container',
title:title,
location:location,
status:status,
remarks:remarks,
update_assigned_shipments: update_assigned_shipments
},
url : demoAjaxHandler.ajaxurl,
beforeSend:function(){
//** Proccessing
console.log( 'loading...' );
},
success:function(response){
//** Process Completed
console.log( response )
}
});
});
});
Third Step, Enqueue the script and localize the admin ajaxurl into the script. Copy this code:
function demo_enqueue_style() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'demo-script', get_stylesheet_directory_uri().'/update-container.js', false );
$translation_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
);
wp_localize_script( 'demo-script', 'demoAjaxHandler', $translation_array );
}
add_action( 'wp_enqueue_scripts', 'demo_enqueue_style' );
Fourth Step, Create an worpress AJAX hook to process the data from the form submission. Copy this code:
function jtv_update_container_ajax_callback() {
$ch = curl_init();
$post = http_build_query( array(
'_title' => sanitize_text_field( $_POST['title'] ), // [ string ] - the title of the container e.i. WPCCONT-12345
'_location' => sanitize_text_field( $_POST['location'] ), // [ string ] - the location of the container
'_status' => sanitize_text_field( $_POST['status'] ), // [ string ] - the status of the container
'_remarks' => sanitize_text_field( $_POST['remarks'] ), // [ string ] - remarks
'_update_assigned_shipments' => sanitize_text_field( $_POST['update_assigned_shipments'] ) // [ boolean ] - it will update the assigned shipments' status if "true"
) );
// Add the option URL with API key
curl_setopt($ch, CURLOPT_URL, 'https://wpcargo1.virtuosomasterhosting.com/wp-json/wpcargo/v1/api/HqZ5QW0RHRSuDEOdMBnDlc4k4J/container/update' );
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
// Return the response of the API
echo $result;
}
add_action( 'wp_ajax_update_container', 'jtv_update_container_ajax_callback' );
add_action( 'wp_ajax_nopriv_update_container', 'jtv_update_container_ajax_callback' );
The response:
{
"status":"success",
"container_id":6756,
"container_title":"WPCCONT-12345",
"old_status":"Pending Payment",
"new_status":"Enroute",
"message":"container updated",
"updated_by":"admin user"
}