DEV Community

Cover image for PHP Ajax with Bootstrap 5 Waitingfor Loading Modal and Progress bar in jQuery Plugin
Code And Deploy
Code And Deploy

Posted on • Edited on

3 2

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

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

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.

php-ajax-with-bootstrap-5-waitingfor-loading-modal-and-progress-bar-in-jquery-plugin

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
            }
        });

    });
}); 
Enter fullscreen mode Exit fullscreen mode

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/bootstrap@5.0.2/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/bootstrap@5.0.2/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>
Enter fullscreen mode Exit fullscreen mode

And last, our PHP file named server.php

<?php

    echo 'server';

?>
Enter fullscreen mode Exit fullscreen mode

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.

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

Happy coding :)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay