5

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.

Improve this question
2
  • 1
    The general technique is typically called AJAX, and involves returning XML or JSON from your Django views after you make the database call, and Javascript making an HTTP request which calls those views. Commented Apr 20, 2011 at 18:52
  • Think if retag your question adding ajax! Commented Apr 21, 2011 at 18:44

4 Answers 4

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the link to the sample app. I was thinking that AJAX was the answering, but couldn't find a definitive "AJAX is your answer" solution on the net. I'll have a look at the app you've supplied.
3

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!

Improve this answer

4 Comments

This helps a bunch! I was slowly realizing that AJAX was going to be needed, but couldn't conceptually understand how a Javascript function, a django view, and an AJAX function (that sounds like the beginning of a bad joke) all tied together to do what I need.
Actually, are their tutorials out there on writing Javascript to "consume the output" of an http request from django? I've been scouring the net looking for information on how to a) Get Javascript to call a specific Django view via the urls.py and b) How to assign the returned value (probably a JSON array) to a Javascript array. Any ideas?
(I can't believe I spelled it "their". Should be "there" -- brutal)
I'm not sure if there are any "JavaScript to Django" tutorials out there, but there are plenty of generic JavaScript asynchronous web request tutorials. Also, unless you want to handle the formatting in the django view, it should output JSON or XML (preferably JSON). Finally, for an excellent JQuery tutorial, go here: w3schools.com/jquery/default.asp
2

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()
Improve this answer

Comments

1

You said it, AJAX!

If you'd care to dig into it consider MDN's AJAX page a good quality starting point for introductory readings; and then "What is the best AJAX library for Django?" on Stackoverflow for further investigations more specific to the question you posted.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.