Display message whilst server is running query Django - html

Question

I have a very long task that runs once the client/user/customer presses the submit button. How can I display a message to say, hang on... query running, until the query finishes using Django?

Answer 1

You should consider using Ajax to do that.
Let's see an example using JQuery;
If in your template, you have this form :
<form id="my_form" action="" method="post">
<label for="age">Age:</label>
<input type="text" name="age" id="age"/>
<input type="submit" value="Submit"/>
</form>
<div id="loading" style="display:none;">Loading...</div>
Let's write some Javascript, assuming you have already include the Jquery lib :
$(function(){
$('#my_form').submit(function(event){
event.preventDefault();
alert('user submitted the form');
$('#loading').show();
$.post('my_url',
{age : $('#age').val()},
function(data){
$('#loading').hide();
alert('server finished to process data.');
});
});
});
You can fully customize this piece of code for doing what you want.
And if you want more debug in ajax, I suggest you to declare your ajaxSetup following this way :
function ajaxSetup(){
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internal Server Error.\n' + x.responseText);
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
}

Answer 2

This is what I ended up doing using JQuery and including some code to determine which button was pressed:
<form>
<div id="loading" style="display:none;">Finding all words, may take a long time</div>
<div id="form_input_things">
<input type="submit" name="_save" value="Save" />
<input type="submit" name="_get_words" value="Get Words" />
{{ form.as_p }}
</div>
</form>
<script>
$("form").submit(function() {
{
if( $("[submit_button_pressed=Save]").get(0) === undefined )
{
$('#loading').show();
$('#form_input_things').hide();
}
}
return true;
});
$(":submit").live('click', function() {
$(this).attr("submit_button_pressed", $(this).val());
});
</script>