CODEWITHSUNDEEP
jquerypythontwitter-bootstrapflask
Skye
Skye

Reputation: 230

Hide Bootstrap Modal after Python Flask template has rendered

I am new to Python and Flask so I am not sure if I am going about this the right way. I have 2 Bootstrap modals. One displays a generic "please wait while loading" spinner that should be displayed whilst my python GETs a JSON string from the server, processes the string as JSON and stores it. The second modal displays only when there is an authentication failure.

Currently when I access the app through localhost:5000/home, the page stays blank whilst the python gets the data from the server and only renders the template once the GET is complete. The loading modal is therefore not displayed as the page renders only once the GET is complete.

I need the page to render, display the loading modal, get the data from the server, then hide the loading modal once the GET is complete and show the authentication failed modal if the server returns a auth failed flag in the returned JSON.

Here is what I have currently

index.html:

{% extends "base.html"%}
{%block content%}

    {% if not ready %}
        <script>
            $(document).ready(function(){       
                $("#pleaseWaitModal").modal("show");
            });
        </script>
    {% endif %}

    {% if not auth %}
        <script>
            $(document).ready(function(){       
                $("#failedValidationModal").modal();
            });
        </script>
    {% endif %}

    <div id="section">
        ...
    </div>
{%endblock%}

app.py:

def getJSON():
    auth=False

    infoCallURL = "https://myURL.com/?someParmas"
    r = requests.get(infoCallURL)
    obj = r.json()

    if obj['Application']['failure']:
        auth=False
    else:
        auth=True

    ready=True
    return ready,auth

@app.route('/',methods=['GET','POST'])
@app.route('/home',methods=['GET','POST'])
def home():
    ready = False
    auth = False
    ready,auth = getJSON()
    return render_template("index.html",ready=ready,auth=auth)

Upvotes: 2

Views: 1103

Answers (1)

matt3o
matt3o

Reputation: 653

For the loading modal just remove {% if not ready %} and {% endif %}. Then adapt the code slightly to show the message until the site is loaded:

$("#pleaseWaitModal").modal("show");
$(document).ready(function(){       
                $("#pleaseWaitModal").modal("hide");
});

The Auth part is more complicated. You are calling getJSON() synchroneously which means the render_template always has the results of this function. If you want this to load asynchroneously you have to use Ajax or anything similar to load the data in the browser. http://api.jquery.com/jquery.getjson/ explains how to load the JSON:

$.getJSON( "https://myURL.com/?someParmas", function( data ) {
var json = JSON.parse(data);
if (json.Application.failure):
    $("#failedValidationModal").modal("show");
else:
    $("#failedValidationModal").modal("hide");
});

Upvotes: 1

Related Questions