Make queries from Javascript to Django server

Question

I am trying to add some basic dynamic functionality to a web page. How do I use JavaScript on the client side to access database information via django on the server side?

I feel like it should be easy to have a JavaScript function on the webpage which calls a django view (or something) and the django view returns a value to the JavaScript function. I don't want the JavaScript itself to connect to the database, because that would seem to circumnavigate django (which, to me, seems incorrect).

Further, I want to be able to do several database requests via JavaScript on a single page. An example would be a web page for creating an invoice. Every additional line of the invoice would require a new query to the database. Then, depending on the product added to the invoice, an additional query would be required to determine that product's price. What I'm getting at is multiple queries to the database within one page done dynamically.

Basically, I want django to do the database searching and pass the information to JavaScript.

Answer 1

Javascript, being client side, cannot directly access your db. The only thing it can is to do a request to Django. If you want to do that request without reloading the page, you need to use an ajax call.

First, prepare your views as usual without javascript. Take a look at jquery and make an ajax call effectively asking for the same view. See http://api.jquery.com/jQuery.get/ and http://api.jquery.com/jQuery.post/

After the request is successful, fill a container using the success callback of the get/post call.

Here is a simple sample Django app with jQuery AJAX calls: http://dl.dropbox.com/u/83342/ajaxapp.tar.gz

Answer 2

To put some "standard" terms to what you're asking - it sounds like you're looking for AJAX functionality from Django.

First, the bad news: There aren't any Django features specific to this kind of functionality.

The good news: The Django view you're talking about will accept HTTP requests just like any other. What you need to do is write some JavaScript code that generates its own HTTP request and consumes the output of the view just like a browser would.

The better news: There are JavaScript libraries like JQuery that make writing reliable client side asynchronous requests (what you want) a lot simpler. In fact, I'd strongly advocate using a library like JQuery over trying to write your own request processing code. It's a simple problem to get working reliably on one browser/machine, but incredibly difficult and time consuming to get working reliably across all of today's widely-used browsers.

Hope this helps!

Answer 3

I'm very late to the party, but I believe this is exactly what you're looking for.

Relevant AJAX code:

var create_note = function() {
  var title = $("#title").val()
  var slug = $("#slug").val()
  if (title != "" && slug != "") { // Fields must actually contain something
    var data = { title:title, slug:slug };
    var args = { type:"POST", url:"/create/", data:data };
    $.ajax(args);
  }
  else {
    // display an explanation of failure -- optional for starters
  }
  return false;
};

Replace the url in args with your own URL. the data variable contains your POST information. In this example it is HTML inputs with the IDs title and slug. Django will receieve/create/ (your URL), parse it through urls.py, and redirect it to a view, just like always.

Then you'll simply have your submit button call this function instead of the normal this.form.submit(); or writing type="submit", for example:

<input type="button" value="Submit" onClick="create_note();">

I have omitted the process for creating error messages. If you're just starting out, you probably don't want to concern yourself with what the user sees just yet.

Finally, for your view, you may do something like this (remember to route through urls.py!):

def create_note(request):
    note = Notes() # Sample Notes class for the purposes of this example
    note.text = request.POST['slug']
    note.title = request.POST['title'] # Just like what you would do normally!
    note.save()