An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
PHP Ajax with Bootstrap 5 Waitingfor Loading Modal and Progress bar in jQuery Plugin
Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/php-ajax-with-bootstrap-5-waitingfor-loading-modal-and-progress-bar-in-jquery-plugin
In my previous post here I posted about how to implement the Bootstrap 5 waitingfor loading modal and progress bar. Now we will implement it through ajax by request server-side using PHP.
I use beforeSend() and complete() functions in ajax to trigger and show the waitingfor loading modal using beforeSend() function and detecting if the ajax is finished requesting to the server using complete() function.
Kindly check the complete javascript code below:
$(document).ready(function() { $('#ajax-with-simple-dialog').on('click', function() { var $this = $(this); //submit button selector using ID // Ajax config $.ajax({ type: "POST", //we are using POST method to submit the data to the server side url: 'server.php', // get the route value beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click waitingDialog.show('Ajax is processing...', { onShow: function() { $this.attr('disabled', true); }, onHide: function() { $this.attr('disabled', false); } }); }, success: function (response) {//once the request successfully process to the server side it will return result here }, complete: function() { waitingDialog.hide(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { // You can put something here if there is an error from submitted request } }); });});
Also, see our following code below for HTML:
<!doctype html><html lang="en"><head> <title>PHP Ajax with Bootstrap 5 Waitingfor Loading Modal with Progress bar jQuery Plugin</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></head><body> <br/><br/><br/> <div class="container"> <h3>Simple Dialog with Ajax</h3> <pre>waitingDialog.show();</pre> <button type="button" class="btn btn-primary" id="ajax-with-simple-dialog">Submit Request</button> <br/><br/> </div> <!-- Must put our javascript files here to fast the page loading --> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Bootstrap Waiting For Script --> <script src="assets/plugins/bootstrap-waitingfor/bootstrap-waitingfor.min.js"></script> <!-- Page Script --> <script src="assets/js/scripts.js"></script></body></html>
And last, our PHP file named server.php
<?php echo 'server';?>
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/php-ajax-with-bootstrap-5-waitingfor-loading-modal-and-progress-bar-in-jquery-plugin if you want to download this code.
Happy coding :)
Original Link: https://dev.to/codeanddeploy/php-ajax-with-bootstrap-5-waitingfor-loading-modal-and-progress-bar-in-jquery-plugin-2i9e
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To