Django reverse () for JavaScript

Question

In my project, I have many Ajax methods, with external client scripts (I don’t want to include JavaScript in the templates!), And changing URLs is a pain for me because I need to manually change the URLs in my Ajax calls.

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

For example, print urlpatterns starting with ^ajax , and then in scripts replace the templates with their actual values?

What, in my opinion, is my question - are there any common practices for such actions? Maybe some reusable apps? I will also be happy to read any advice and related thoughts that 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'), 

Answer 1

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

dutils is a small utility library whose goal is to provide JavaScript / Django developers with several utilities that will help develop the RIA on top of the Django Backend.

It currently supports the following features:

• The reverse method for generating Django urls ...

Answer 2

Try creating javascript helper functions (in the django template) to generate the url string. In simple form, they may look like this:

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

This may have some other consequences, but I think it should work.

Answer 3

What happened to putting JavaScript in your templates?

You often want to call the initialization function in an HTML template anyway, so why not pass it an object containing the URLs that you will use?

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

If you find yourself passing a lot of variables this way or want to use logic in your JavaScript, what you are doing in your HTML templates, why not display your script through the Django template engine? Remember that Django templates are not only for HTML documents - often it helps to use templates for plain text, XML, JSON , and even JavaScript. Concerned with performance? Then cache the result.

Answer 4

I created a mechanism that creates a list of url patterns in your Django project and outputs it to a Javascript file. This is the django-js-utils fork.

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

Answer 5

For this purpose, we created a small application called django-js-reverse .

For example, you can get a named URL

urls.py:

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

in javascript for example:

Urls.betterliving_get_house ('house', 12)

result:

/ betterliving / house / 12 /

Answer 6

I usually use the URL in the <input type="hidden" /> element or in the rel="" attribute.

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

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

Custom attributes are well supported by all major browsers, and hidden elements should not be in forms.

Answer 7

First, you must provide your URL:

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

You can then pass the 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 can 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); } }; 

Please note that your token must match the regex type for a successful solution (I cannot use {item_id} as a token because it is defined using \d+ ).

I was a bit dissatisfied with this solution, and I ended up writing my own javascript application using 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(); }); 

Answer 8

You can remove the parameters from the URL and pass the dynamic parts as request 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) { ... }); }); 

Answer 9

I found this cool django application 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) 

Result

 /betterliving/house/12/