Question

I have a view that can take several seconds to process a GET request and render the results. I’d like to put up a temporary page that says “Processing…” while the view is doing its stuff. How can I do this?

UPDATE

I don’t have any control over the link to my page. It is a link to me a third party has on their page. When they click it I run some stuff and display the results. I don’t want them to have to click anything on the pages I display.

Ideally, I would like the following:

1. A user clicks a link to my website that is on a 3rd party website
2. My websites displays a “processing request” message – the user doesn’t have to click anything, just wait.
3. After a few seconds the results are displayed.

All the user had to do was click a link once and wait for the results.

Some example code would be greatly appreciated as I am quite new to things like jQuery – if that’s what I need.

Answer 1

Use jQuery to display the message while waiting for the view to return the result.

Place a hidden div-tag in the page containing the processing message/image.

If you submit the GET request by clicking a button you put an onclick event on the button to display the div-tag. When the view is done processing, the page will be reloaded and the target page will be displayed.

If the view is called using AJAX you can place the show/hide of the div in the ajaxStart and ajaxComplete events.

EDIT: OK since the page will be called from by a 3rd party it will complicate things a bit. I would suggest that you load the page without the data and once the page is loaded you do an AJAX GET request to retrieve the data.

You could do as follows:

Add a hidden div-tag to the page with the Progress message/image.

<div id="progress">Please wait while the page is loading.</div>

Then add the ajax GET call to the page:

$(document).ready(function () {

  //Attach the ajaxStart and ajaxComplete event to the div
  $('#progress').ajaxStart(function() {
      $(this).show();
  }); 

  $('#progress').ajaxComplete(function() {
      $(this).hide();
  }); 

  //Perform the AJAX get
  $.get('/your_view/', function(data) {
     //Do whatever you want with the data here 
  });
});

The above code has not been tested but it will give you an idea.

UPDATE

I would suggest that you return a JSON object or similar from your view:

companies = Company.objects.filter(name__istartswith=companyname)
results = [{'value': company.name, 'id':company.id} for company in companies ]
json = simplejson.dumps(results)
return HttpResponse(json, mimetype='application/json')

You can also use the getJSON() method instead of get() in jQuery.