Javascript loading while executing backend python query.

[G Z]

Hi I'm trying to write a loading script that displays a loading image while the django backend queries i have written are exectuting. This is to say i have some very complicated sql queries i call mannually with python by watching for specific post from the webpage to execute different queries. I want to display a loading while the query is executing one of them takes upwards of a minute because it is looking through very large amounts of data.

Right now I have 

<script type="text/javascript">$(document).ready(function(){        $('#loading').hide();    });$('#queryForm').on("submit", function () {    $('#loading').show();});</script>


This is to say that while the page is loading it will be displayed and when the document is ready it will hide it.
However it doesn't show the div tag when I click any of my buttons.

 <form method='post' action='' id='queryForm'> <input type='submit' name='customer_licenses' value='License Summary' class="btn btn-success btn-block">
<input type='submit' name='compute_histories' value='Compute Histories' class="btn btn-success btn-block"> <input type='submit' name='customer_bandwidth' value='Customer Bandwidth' class="btn btn-success btn-block"> <input type='submit' name='customer_storage' value='Storage Summary' class="btn btn-success btn-block">

I don't understand why this isn't working any suggestions?

[Collin Anderson]

You are saying you have a div with id="loading" with the image in it that is not being shown?

<div id="loading">loading image here</div>

[shmengie]

On Monday, August 4, 2014 12:12:43 PM UTC-4, G Z wrote:

I don't understand why this isn't working any suggestions?

This probably seems like a django issue, but it's not.

When you submit a form, the current document becomes old news.  Browser posts the form data and waits for new page to be returned.  Logically, what you've written makes sense, but the side effect of the current document becoming stale, defeats the logic. 

$(document).ready()  django isn't sending the page until your query finishes executing, so you're probably left viewing the stale page until the browser receives the new.

A kludgey method to convince the browser to show the <div> before the page goes stale... 

$('#queryForm').on("submit", function () {

    if ($('#loading').visible()) { //if #loading not visible show it, prevent default, set timer to re-submit.
       return; //submits form.
     }
    $('#loading').show();
    event.preventDefault()
    setInterval(function(){ $('#queryForm').submit() },1000);});

Won't guarentee it'll work, but it should..

The professional method to achieve the desired effect is a bit more involved.
To achieve the desired effect, use ajax to an url that returns json response, which is a bit involved to setup.

Basically, you use javascript to issue an ajax call to another url which loads data from the query. At the time of the initial ajax call, you show the #loading <div>
When the ajax call receives it's response, you hide #loading and display the json data in another <div> where appropriate.

The ajax call doesn't load a fresh, it fetches json data.  json data is more compact than html, so this has the side-effect of transferring faster.  Less work for the web server and less traffic between server and browser.   However!!!  This requires more preparation.

Try the kludge, it might actually work.  Then invest time implementing an ajax solution.

[shmengie]

    if ($('#loading').visible()) { //if #loading not visible show it, prevent default, set timer to re-submit.

it *might* actually work if you use this condition instead
 

if($('#loading').is(':visible')) {