Django reverse() for JavaScript

Question

In my project I have a lot of Ajax methods, with external client-side scripts (I don't want to include JavaScript into templates!) and changing URLs is kind of pain for me because I need to change URLs in my Ajax calls manually.

Is there is some way to emulate the behavior of {% url %} templatetag in JavaScript?

For example, print urlpatterns starting with ^ajax and later in scripts replace patterns with their actual values?

That's what on my mind, and my question is - are there any common practices to do things like that? Maybe some reusable applications? Also I will be happy to read any advices and relevant thoughts you have.

Update 1: I'm talking about computed URLs, not static ones:

url(r'^ajax/delete/(?P<type>image|audio)/(?P<item_id>\d+)/from/set/(?P<set_id>\d+)/$', 'blog.ajax.remove_item_from_set'),

Does this answer your question? Calling Django `reverse` in client-side Javascript — Flimm
– Flimm, Commented Nov 24, 2020 at 8:20

kodmasin · Accepted Answer · 2011-10-16 21:07:34Z

19

Try creating javascript helper functions (in django template) for generating url string. In simple form they could look like this:

function generete_some_url(id){
    return "{% url some_url itemid=112233 %}".replace("112233", id);
}

Maybe this has some other implications but I think it should work.

answered Oct 16, 2011 at 21:07

kodmasin

3572 silver badges7 bronze badges

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

2 Comments

Rafael Capucho Over a year ago

You save my life, thank you! Just one observation, i guess that is better to use id=0 in the placeholder because you'll never have one equals 0, we couldn't say the same for 112233, but in the other can have all 0 of the string changed, maybe we should one some template to change in the right position.

kodmasin Over a year ago

I am glad you like my solution. Regarding id it is more important that value you are replacing is not somewhere else in url string. So it does not really meter is it 0 or 112233 as far as the same value is not elsewhere in url string.

Peter Mortensen · Accepted Answer · 2010-01-12 20:17:17Z

14

What's wrong with putting JavaScript in your templates?

You often want to call an initialisation function in your HTML template anyway, so why not pass it an object containing URLs you'll be using?

<script>
MYGLOBAL.mymodule.init({
    fancy_ajax_url: '{% url fancy %}',
    fancier_ajax_url: '{% url fancier %}'
});
</script>

If you find yourself passing a lot of variable this way, or wanting to use logic in your JavaScript that you do in your HTML templates, then why not render your script through Django's templating engine? Remember, Django templates are not just for HTML documents - often it helps to use templates for plain text, XML, JSON, and yes even JavaScript. Worried about performance? Then cache the result.

edited Jan 12, 2010 at 20:17

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 25, 2009 at 10:09

ozan

9,3514 gold badges32 silver badges27 bronze badges

4 Comments

dir01 Over a year ago

That are initials of my task, so face it ) JS files would be delivered thru CDN. What I can do is to put urlpatterns on the top of my page (set js variables) and compile real urls from regexps with real data

intgr Over a year ago

The downside of this approach is that there's no way to use view arguments.

azmeuk Over a year ago

By design, mixing languages is a bad idea.

Adam Johnson Over a year ago

This is vulnerable to XSS attacks - the safe way to pass variables to JavaScript in Django templates is the json_script filter: docs.djangoproject.com/en/3.0/ref/templates/builtins/…

Dimitri Gnidash · Accepted Answer · 2011-05-03 21:46:09Z

12

I created a mechanism that builds a list of url patterns in your Django project and outputs that in a Javascript file. It is a fork of django-js-utils.

The repo link is here: https://github.com/Dimitri-Gnidash/django-js-utils

answered May 3, 2011 at 21:46

Dimitri Gnidash

1211 silver badge2 bronze badges

Comments

gnat · Accepted Answer · 2016-09-24 22:14:51Z

10

https://github.com/mlouro/django-js-utils

dutils is a small utility library that aims to provide JavaScript/Django developers with a few utilities that will help the development of RIA on top of a Django Backend.

It currently supports the following features:

Reverse method for generating Django urls...

edited Sep 24, 2016 at 22:14

gnat

6,251122 gold badges57 silver badges76 bronze badges

answered Mar 21, 2011 at 14:57

dir01

2,2344 gold badges19 silver badges18 bronze badges

2 Comments

SystemParadox Over a year ago

Also check out some of the forks. Dimitri-Gnidash builds the URLs with a management command. ljosa created a view which builds them on the fly.

Fydo Over a year ago

It seems like this solution still requires to hard code the {url_name:pattern} dictionary. would be nice to automate the generation of the list found in dutils.conf.urls.example.js???

ierror · Accepted Answer · 2013-02-05 16:29:13Z

7

We created a small app called django-js-reverse for this purpose.

For example you can retrieve a named url

urls.py:

url(r'^/betterliving/(?P[-\w]+)/(?P\d+)/$', 'get_house', name='betterliving_get_house'),

in javascript like:

Urls.betterliving_get_house('house', 12)

result:

/betterliving/house/12/

answered Feb 5, 2013 at 16:29

ierror

5532 gold badges6 silver badges14 bronze badges

Comments

Emil Ivanov · Accepted Answer · 2009-11-25 09:35:16Z

4

What I usually do is put the URL in either an <input type="hidden" /> element, or in the rel="" attribute.

Then, when writing the JS (using jQuery below) I do:

$('div#show_more').click(function () {
    var url = $(this).attr('rel');
    // or
    var url = $('#more_url').val();

    $.get(url, function () { /* ... */ });
});

Nonstandard attributes are well supported by all major browsers and hidden elements don't have to be in forms.

answered Nov 25, 2009 at 9:35

Emil Ivanov

37.8k12 gold badges78 silver badges92 bronze badges

2 Comments

dir01 Over a year ago

What would you do with computed urls? url(r'^ajax/delete/(?P<type>image|audio)/(?P<item_id>\d+)/from/set/(?P<set_id>\d+)/$', 'blog.ajax.remove_item_from_set'),

Emil Ivanov Over a year ago

You put them somewhere on the page (in the django template) - the javascript is a separate file that is not generated by django.

noirbizarre · Accepted Answer · 2012-11-02 17:26:33Z

2

First, you should name your url:

url(r'^blog/(?P<item_id>\d+)/$', 'blog.ajax.remove_item', name='blog-item'),

Then you could pass urls as variables to your module:

<script src="{{ STATIC_URL }}js/my-module.js"></script>
<script>
$(function(){
    MyModule.init('{% url blog-item item.id %}');
});
</script>

// js/my-module.js
var MyModule = {
    init: function(url) {
        console.log(url);
    }
};

You could use tokens in your url:

<script src="{{ STATIC_URL }}js/my-module.js"></script>
<script>
$(function(){
    MyModule.init("{% url blog-item item_id='0000' %}");
});
</script>

// js/my-module.js
var MyModule = {
    init: function(url) {
        var id = 1;
        this._url = url;
        console.log(this.url(id));
    },
    url: function(id) {
        return this._url.replace('0000', id);
    }
};

Notice that your token should match the regex type to resolve successfully (I can't use {item_id} as token because it's defined with \d+).

I was a little bit unsatisfied with this solution and I ended by writing my own application to handle javascript with django: django.js. With this application, I can do:

{% load js %}
{% django_js %}
{% js "js/my-module.js" %}

// js/my-module.js
var MyModule = {
    init: function() {
        var id = 1;
        console.log(Django.url('blog-item', id));
    }
};

$(function(){
    MyModule.init();
});

answered Nov 2, 2012 at 17:26

noirbizarre

3,4291 gold badge32 silver badges21 bronze badges

1 Comment

Adam Johnson Over a year ago

Using {% url %}, or any other tags that might add user data, is vulnerable to XSS attakcs - the safe way to pass data to JavaScript in templates is the json_script filter: docs.djangoproject.com/en/3.0/ref/templates/builtins/…

Bryce · Accepted Answer · 2014-05-25 06:26:35Z

2

You can remove the parameters from the URL, and pass the dynamic parts as query parameters:

  $('#add-choice-button').on('click', function () {
    var thing_id = $(this).closest('.thing').attr('data-item-id');
    $.get('{% url 'addThing' %}?t='+thing_id, function (data) {
      ...
    });
  });

answered May 25, 2014 at 6:26

Bryce

8,8627 gold badges58 silver badges74 bronze badges

Comments

Kotlinboy · Accepted Answer · 2018-01-14 06:34:55Z

1

I have found this cool django app called Django JS reverse

https://github.com/ierror/django-js-reverse

If you have a url like

url(r'^/betterliving/(?P<category_slug>[-\w]+)/(?P<entry_pk>\d+)/$', 'get_house', name='betterliving_get_house'),

Then you do

Urls.betterliving_get_house('house', 12)

The result is

/betterliving/house/12/

answered Jan 14, 2018 at 6:34

Kotlinboy

3,9354 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Django reverse() for JavaScript

9 Answers 9

2 Comments

4 Comments

Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

4 Comments

Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related