CODEWITHSUNDEEP
pythonajaxflaskbootstrap-4
broke31
broke31

Reputation: 19

how to display a loading message while performing a background operation in flask?

I have the following situation:

index.html file:

 <div class="col-xl-3 col-md-6">
   <div class="card bg-primary text-white mb-4">
     <div class="card-body">Prima alimentazione</div>
      <div class="card-footer d-flex align-items-center justify-content-between">
       <a id= 'firstAlimentazione' class="small text-white stretched-link">View Details</a>
        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
         </div>
       </div>
    </div>

to which the following ajax function is connected

$(function() {
          $('a#firstAlimentazione').bind('click', function() {
            $.getJSON('/firstScript',
                function(data) {

            });
            return false;
          });
});

that calls the following python code

# background process happening without any refreshing
@app.route('/firstScript')
def firstScript():
    storage = restore_value()
    hostname = storage.get(1)
    port = storage.get(2)
    db_name = storage.get(3)
    name_tab = storage.get(4)
    directory_to_load = storage.get(5)
    directory_log = storage.get(6)
    print(os.system("python3 FirstSupply/script.py " + hostname+" "+port+" "+db_name+" "+name_tab+" "+directory_to_load+" " + directory_log))
    return "nothing"

since the "python3 script" can take several minutes to finish, I would like to show an alert to indicate the loading of the operation and the subsequent termination.

How can I do this?

Upvotes: 0

Views: 2251

Answers (1)

Emmet Gibney
Emmet Gibney

Reputation: 143

Here is an approach I have taken in a Flask project of mine.

I have a loader I include on pages where I want to show this kind of message. I'll put something like this at the bottom of the template:

{% include "loading-modal.html" %}

The content can be whatever you want. It could just be a simple message/alert, or it could be some sort of animation. I've included links at the bottom of simple animations.

The style of this loader will include:

display: none;

This way the loader doesn't show up to the user. Then when I run my ajax function I will make the loader visible with something like the following:

var loader = document.getElementById('loading-bg');
loader.style.display = 'block';

This will make the loader visible until I either hide it again, or redirect the user to whatever page they're going to next. I won't hide the modal again until whatever is happening in the background returns a result to my ajax function.

This approach assumes that you don't need to be able to provide some sort of progress indication to the user, or that you can't because you can't know how long it is going to take. It also assumes that your user cannot interact with the screen while this script is running, because I'll generally put a transparency over the content of the page which blocks all content.

If you want your loader to include some sort of animation here is one I have used before:

https://tobiasahlin.com/spinkit/ https://github.com/tobiasahlin/SpinKit

I hope this helps.

Upvotes: 1

Related Questions