Calling Django `reverse` in client-side Javascript

Question

I'm using Django on Appengine. I'm using the django reverse() function everywhere, keeping everything as DRY as possible.

However, I'm having trouble applying this to my client-side javascript. There is a JS class that loads some data depending on a passed-in ID. Is there a standard way to not-hardcode the URL that this data should come from?

var rq = new Request.HTML({
    'update':this.element,
}).get('/template/'+template_id+'/preview'); //The part that bothers me.

Answer 1

There is another method, which doesn't require exposing the entire url structure or ajax requests for resolving each url. While it's not really beautiful, it beats the others with simplicity:

var url = '{% url blog_view_post 999 %}'.replace (999, post_id);

(blog_view_post urls must not contain the magic 999 number themselves of course.)

Answer 2

Having just struggled with this, I came up with a slightly different solution.

In my case, I wanted an external JS script to invoke an AJAX call on a button click (after doing some other processing).

In the HTML, I used an HTML-5 custom attribute thus

<button ... id="test-button" data-ajax-target="{% url 'named-url' %}">

Then, in the javascript, simply did

$.post($("#test-button").attr("data-ajax-target"), ... );

Which meant Django's template system did all the reverse() logic for me.

Answer 3

The most reasonable solution seems to be passing a list of URLs in a JavaScript file, and having a JavaScript equivalent of reverse() available on the client. The only objection might be that the entire URL structure is exposed.

Here is such a function (from this question).

Answer 4

Good thing is to assume that all parameters from JavaScript to Django will be passed as request.GET or request.POST. You can do that in most cases, because you don't need nice formatted urls for JavaScript queries.

Then only problem is to pass url from Django to JavaScript. I have published library for that. Example code:

urls.py

def javascript_settings():
    return {
        'template_preview_url': reverse('template-preview'),
    }

javascript

$.ajax({
  type: 'POST',
  url: configuration['my_rendering_app']['template_preview_url'],
  data: { template: 'foo.html' },
});

Answer 5

Similar to Anatoly's answer, but a little more flexible. Put at the top of the page:

<script type="text/javascript">
window.myviewURL = '{% url myview foobar %}';
</script>

Then you can do something like

url = window.myviewURL.replace('foobar','my_id');

or whatever. If your url contains multiple variables just run the replace method multiple times.

Answer 6

I like Anatoly's idea, but I think using a specific integer is dangerous. I typically want to specify an say an object id, which are always required to be positive, so I just use negative integers as placeholders. This means adding -? to the the url definition, like so:

url(r'^events/(?P<event_id>-?\d+)/$', events.views.event_details),

Then I can get the reverse url in a template by writing

{% url 'events.views.event_details' event_id=-1 %}

And use replace in javascript to replace the placeholder -1, so that in the template I would write something like

<script type="text/javascript">
var actual_event_id = 123;
var url = "{% url 'events.views.event_details' event_id=-1 %}".replace('-1', actual_event_id);
</script>

This easily extends to multiple arguments too, and the mapping for a particular argument is visible directly in the template.

Answer 7

I've found a simple trick for this. If your url is a pattern like:

"xyz/(?P<stuff>.*)$"

and you want to reverse in the JS without actually providing stuff (deferring to the JS run time to provide this) - you can do the following:

Alter the view to give the parameter a default value - of none, and handle that by responding with an error if its not set:

views.py

def xzy(stuff=None):
  if not stuff:
    raise Http404
  ... < rest of the view code> ...

• Alter the URL match to make the parameter optional: "xyz/(?P<stuff>.*)?$"

• And in the template js code:

  .ajax({ url: "{{ url views.xyz }}" + js_stuff, ... ... })

The generated template should then have the URL without the parameter in the JS, and in the JS you can simply concatenate on the parameter(s).

Answer 8

Use this package: https://github.com/ierror/django-js-reverse

You'll have an object in your JS with all the urls defined in django. It's the best approach I found so far.

The only thing you need to do is add the generated js in the head of your base template and run a management command to update the generated js everytime you add a url

Answer 9

One of the solutions I came with is to generate urls on backend and pass them to browser somehow.

It may not be suitable in every case, but I have a table (populated with AJAX) and clicking on a row should take the user to the single entry from this table.

(I am using django-restframework and Datatables).

Each entry from AJAX has the url attached:

class MyObjectSerializer(serializers.ModelSerializer):
    url = SerializerMethodField()
    # other elements

    def get_url(self, obj):
       return reverse("get_my_object", args=(obj.id,))

on loading ajax each url is attached as data attribute to row:

var table = $('#my-table').DataTable({
   createdRow: function ( row, data, index ) {
      $(row).data("url", data["url"])
   }
});

and on click we use this data attribute for url:

table.on( 'click', 'tbody tr', function () {
  window.location.href = $(this).data("url");
} );

Answer 10

I always use strings as opposed to integers in configuring urls, i.e. instead of something like

... r'^something/(?P<first_integer_parameter>\d+)/something_else/(?P<second_integer_parameter>\d+)/' ...

e.g: something/911/something_else/8/

I would replace 'd' for integers with 'w' for strings like so ...

... r'^something/(?P<first_integer_parameter>\w+)/something_else/(?P<second_integer_parameter>\w+)/' ...

Then, in javascript I can put strings as placeholders and the django template engine will not complain either:

...
var url     = `{% url 'myapiname:urlname' 'xxz' 'xxy' %}?first_kwarg=${first_kwarg_value}&second_kwarg=${second_kwarg_value}`.replace('xxz',first_integer_paramater_value).replace('xxy', second_integer_parameter_value);

        var x = new L.GeoJSON.AJAX(url, {
            style: function(feature){ 
...

and the url will remain the same, i.e something/911/something_else/8/. This way you avoid the integer parameters replacement issue as string placeholders (a,b,c,d,...z) are not expected in as parameters