Using the Django URL Tag in an AJAX Call

Question

There are LOTS of post and pages discussing the use of Django and AJAX, and I've read hundreds over the past day or so looking for the answer to this question. A quick overview:

May of the examples show a hard-coded URL like this:

$.post("/projects/create/", {"name" : name}, function(data) {...

or some use the URL template tag, but with no parameters:

$.post("{% url create_project %}", {"name" : name}, function(data) {...

However, I'd like to include a Django-style parameter in a URL. Here's my url definition:

url(r'ajax/entity_name/(?P<pk>\w+)/$',EntityAjaxView.as_view(),name='entity_name'),

Yes, I'm using a class based view, and it is based on DetailView. This view looks by default for a pk value to be provided in the URL, and in a normal template I would use:

{% url entity_name id_number %}

to provide a link. In my code, I want to grab the value entered in an input box for the pk value. Here is a snippet of my JavaScript (which doesn't work):

var id_number = $('#id_endowmententity_set-' + rownum + '-id_number').val()
$.ajax({
    type: "GET",
url: '{% url entity_name id_number %}',

So, my question is, can I use the URL template tag with a value from an input box?

(I know that I could use POST instead of GET and pass the id_number in the POST data, but that won't work well with the DetailView.)

Thanks in advance for your help.

Answer 1

Django is a server-side application. Javascript is client-side. Django templates get rendered on the server, so {% url entity_name id_number %} is evaluated on the server side, and then it's value is returned to the client. Just because of this, it's impossible for you to combine Django templates with javascript. However there are couple of things you can do to solve your problem.

Since you are making an ajax call, and the ajax call depends on some user input, usually the best route for the client to send any type of user input to the server is by either using querystring (thing after ? in the URL) or by sending a POST data. So the simplest thing is to change your your url not to include the pk in the url, but for the view to get that as part of GET or POST data.

url(r'ajax/entity_name/$', EntityAjaxView.as_view(), name='entity_name'),

and the view (sorry I'm not familiar with class based views):

def entity_name(request):
    pk = request.GET.get('pk')
    ...

That seems to me to be the most elegant solution. If however you absolutely need to construct the url on the client side, you can generate a template url on the server side and then replace whatever parts you need on the client side to get the full url. This however requires more maintenance and therefore is more error prone. Simple js example of this approach:

var id_number = $('#id_endowmententity_set-' + rownum + '-id_number').val(),
    url = '{% url entity_name 0 %}'.replace('0', id_number);
$.ajax({
    type: "GET",
    url: url,
    ...
});