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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 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:
1 2 3 4 5 6 7 8 9 | { "status":"success", "container_id":6756, "container_title":"WPCCONT-12345", "old_status":"Pending Payment", "new_status":"Enroute", "message":"container updated", "updated_by":"admin user"} |