Django: How do I go about changing my simple app to use Ajax?

Question

I currently have a web page where the user enters some data and then clicks a submit button. I process the data in views.py and then use the same Django template to return and display the original data and the results. What I would like to do is try to give it a bit more of a modern look and feel. You know the sort of thing, the page doesn't refresh but displays a spinning disk until the results are displayed. I assume this means using Ajax? How difficult is it to modify a simple app like this to use Ajax? What is involved? What are the best tools to use? JQuery?

Answer 1

All you need to do is submit the form using ajax

Example:

$('#form').bind('submit', function(){

   $.ajax({url:$(this).attr('action'),
           type: "POST",
           data: {//form inputs},
           success:function(response){
              // code to update DOM
           }
          });
  return false;
});

this would submit the form using ajax and stop page from reload.

I would recommend you to take a look at django ajax example, this has a clean explanation for handling ajax on the django.

Answer 2

this jquery plugin is useful for that you want.

Answer 3

I tend to write my views on a very granular level rather than having one view render a whole page. This allows me to take all of these components and reuse them in different ways.

For instance if I have a view with a form and a list of results below the form, I would write a minimalist view for the form, for the list, and then I would write a simple view for the "page" that ties them all together.

In your page view you can call the other views methods by passing your original request object to them, along with anything else they need. You can wrap the .context from those view's responses in a DIV or something which in turn can be updated dynamically by javascript (jQuery makes this relatively painless).

In order to update those DIVs with the minimalist views, you'll need to set them up in your urls.py of course. You'll likely use jQuery to pass some GET or POST data to those smaller views.

Also, I recommend using AJAX as sort of a "last resort". By this I mean, if you have a static list of data that's relatively small, just pass it all to your main view in javascript and act on it on the client side. But if you have a much larger data set or some pretty quickly changing dynamic content (or any other sort of unreliable data), that's a good use for AJAX.