How To Create a New Container using REST API through AJAX
REST API ROUTE: ‘http://mysite.com/wp-json/wpcargo/v1/api/my-api-key-here/container/add’
First step, we need to create a form and populate it:
<form action="#" id="add-new-container"> <div id="custom_container_section" class="col-md-12 mb-4"> <div class="card"> <section class="card-header"> Custom Container Section </section> <section class="card-body"> <div class="row"> <section class=" col-md-12"> <div id="form-49" class="form-group "> <label for="_container_number" class="active">Container Number/Title</label> <input id="_container_number" type="text" class="form-control _container_number" name="_container_number" value=""> </div> </section> <section class=" col-md-12"> <div id="form-50" class="form-group "> <label for="_agent_id" class="active">Assigned Agent ( Agent ID )</label> <input id="_agent_id" type="number" class="form-control wpccf-number _agent_id" name="_agent_id" value="" autocomplete="off"> </div> </section> <section class=" col-md-12"> <div id="form-51" class="form-group "> <label for="_flight_number" class="active">Flight/Container No.</label> <input id="_flight_number" type="text" class="form-control _flight_number" name="_flight_number" value=""> </div> </section> <section class=" col-md-12"> <div id="form-52" class="form-group "> <label for="_container_status" class="active">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-53" class="form-group "> <label for="_driver_id" class="active">Assigned Driver ( Driver ID )</label> <input id="_driver_id" type="number" class="form-control wpccf-number _driver_id" name="_driver_id" value="" autocomplete="off"> </div> </section> <section class=" col-md-12"> <div id="form-54" class="form-group "> <button type="submit">Submit</button> </div> </section> </div> </section> </div> </div> </form>
The populated form would look something like this:
Second step, create a JavaScript file that will handle the submit event when the form submit button is click. Copy and paste this code on the JavaScript file you created:
jQuery(document).ready( function( $ ){
$('form#add-new-container').on('submit', function( e ){
e.preventDefault();
let title = $( 'input[name="_container_number"]' ).val();
let agent_id = $( 'input[name="_agent_id"]' ).val();
let flight_num = $( 'input[name="_flight_number"]' ).val();
let driver_id = $( 'input[name="_driver_id"]' ).val();
let status = $( 'input[name="_container_status"]' ).val();
$.ajax({
type:"POST",
dataType:"JSON",
data:{
action:'add_container',
title : title,
agent_id:agent_id,
flight_num:flight_num,
driver_id:driver_id,
status:status
},
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.
function demo_enqueue_style() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'demo-script', get_stylesheet_directory_uri().'/add-new-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.
function jtv_add_container_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
'_agent_id' => sanitize_text_field( $_POST['agent_id'] ), // [ integer ] - the ID of the agent to be assigned to the container
'_flight_number' => sanitize_text_field( $_POST['flight_num'] ), // [ string ] - the container/flight number
'_driver_id' => sanitize_text_field( $_POST['driver_id'] ), // [ integer ] - the ID of the driver to be assigned to the container
'_status' => sanitize_text_field( $_POST['status'] ) // [ string ] - the status of the container. NOTE: this is case sensitive and based from wpcargo's status list.
) );
// Add the option URL with API key
curl_setopt($ch, CURLOPT_URL, 'https://mysite.com/wp-json/wpcargo/v1/api/my_api_key/container/add' );
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;
wp_die();
}
add_action( 'wp_ajax_add_container', 'jtv_add_container_ajax_callback' );
add_action( 'wp_ajax_nopriv_add_container', 'jtv_add_container_ajax_callback' );
The response:
{
"status":"success",
"container_id":6756,
"container_title":"WPCCONT-12345",
"message":"container added"
}