Chapter 4 – Build a Server Function Loading Progress Bar Using Ajax, jquery and Python

Some server functions loading time takes much longer than others. For engaging with the audiences who are waiting for the response, we necessarily notify the users that the app is still running instead of having crashed. In this piece, I would walk you through briefly how to add a progress bar using Ajax, and jquery on the client side interacting with the Python server side.

Table of Contents: Build a Server Function Loading Progress Bar Using Ajax, jquery, and Python

• Import Ajax API script
• 3 Basic components to build a progress bar
• Ajax javascript
• Python Server-Side Return
• Full Javascript of Building a Server Function Loading Progress Bar Using Ajax, jquery and Python

Import Ajax API script

AJAX is a set of web development techniques that use many web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can asynchronously send and retrieve data from a server without interfering with the existing page’s display and behavior. It is not a programming language and it requires a built-in browser with a XMLHttpRequest object that requests data from the server. It also uses JavaScript and HTML DOM to display data.

To load jQuery, just embed the Google API snippet script in the HTML page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

3 Basic components to build a progress bar

There are three fundamental parts that are consisted of for building this progress bar; They are the things as follows:

• Javascript script
• Client-side HTML elements interacting with the backend (Including the progress bar)
• Data type return from server side.

Take a form submission for an example. It should have a form with input and button elements having specific ID connecting with the Javascript and backend Python request form section. POST or GET method doesn’t matter although it depends on your App function.

Here is the sample in which the script connects with the form named sample_newsletter in id.

Sample 1:

$(document).ready(function(){

    $('#sample_newsletter').on('submit', function(event){

        event.preventDefault();

})

Sample 2:

<form id="sample_form" method="POST">

                    <div class="card-style mb-30">

                        <div class="title d-flex flex-wr

Sample 3: Bootstrap Progress (Please be sure to add the bootstrap script in the header. For more details, please refer to this article)

                   <div id="process" style="display:none;">

                      <div class="progress">

                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">

                        </div>

                      </div>

                    </div>

Ajax javascript

First thing first, apart from starting the functions as the sample shown above, we need to define the fundamental function script object. Here is the sample including object URL, data type, method, etc.

        $.ajax({

            url: "the route your form would connect with",

            method: "POST",

            data: $(this).serialize(),

            dataType: 'json',

Then, we can set up some functions that can be triggered to run in a specific sequence. There are four methods we could use, which are beforeSend, complete, success, and error.

 beforeSend: function() {

            $('#animation').show();

            $('#keep').attr('disabled', 'disabled');

            $('#process').css('display', 'block');

            },

            complete: function(){

            $('#animation').hide();

            },

            success: function(data) { 

            var percentage = 0;

            var timer = setInterval(function() {

                percentage += 20;

                progress_bar_process(percentage, timer, data);

            }, 1000);

            },

            error: function(xhr, status, error) {

            console.log('Ajax request error:', error);

            }

We can set the timer in one of the sections as you like. For example, here I set the timer in the success section which means once the function on the server side has been completed, it would show the progress bar starts moving. Before that, there is an animator that keeps moving that shows functions are loading.

Last but not least, as you can see there is a function above called progress_bar_process. Basically it’s a function to trigger events when functions are completed

    function progress_bar_process(percentage, timer, data) {

    $('.progress-bar').css('width', percentage + '%');

    if (percentage === 100) {

        clearInterval(timer);

        $('#sample_form')[0].reset();

        $('#process').css('display', 'none');

        $('.progress-bar').css('width', '0%');

        $('#save').attr('disabled', false);

        setTimeout(function(){

            location.reload();

        },1000);

Python Server-Side Return

As mentioned above, the return data type would be JSON. Thus, the return from the Python server side should output JSON data. Take Flask for example, it needs JSONIFY to output and respond to the requests. In the response, you can set a dictionary or even a render template in the JSONIFY.

On the client side, we need to add the id value to the HTML element to show the return value.

Here is the sample:

<script>

Var html_append = “”

$.each(data, function(i, item){

Html_append =+;

}

$(‘#loopingResult’).html(html_append)

</script>

In the HTML part, here is the sample to connect with the javascript to fetch the return value.

<div id=”loopingResult”></div>

Full Javascript of Building a Server Function Loading Progress Bar Using Ajax, jquery and Python

If you are interested in Chapter 4 – Build a Server Function Loading Progress Bar Using Ajax, jquery and Python, please subscribe to our newsletter by adding the message “Chatper4 progress bar with AJAX”. We would send you the script immediately to your mailbox.

I hope you enjoy reading Chapter 4 – Build a Server Function Loading Progress Bar Using Ajax, jquery, and Python. If you did, please support us by doing one of the things listed below, because it always helps out our channel.

• Support and donate to my channel through PayPal (paypal.me/Easy2digital)
• Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
• Follow and like my page Easy2Digital Facebook page
• Share the article on your social network with the hashtag #easy2digital
• You sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount codes
• Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)