jquery - Call django urls inside javascript on click event

Question

I got a javascript onclick event inside a template, and I want to call one of my Django urls with an id parameter from it, like this :

$(document).on('click', '.alink', function () {
        var id = $(this).attr('id');
        document.location.href ="{% url 'myapp:productdetailorder' id %}"
});

Course this is not working at all. Any idea ?

Thanks in advance !!

Answer 1

I think the best way to do this is to create a html data-* attribute with the URL rendered in a template and then use javascript to retrieve that.

This way you avoid mixing js/django template stuff together. Also, I keep all of my JS in a separate file outside the view (which is a much better practice in general), and therefore trying to mix these two won't work.

For instance, if you have a url you want, just create an html hidden element:

<input type="hidden" id="Url" data-url="{% url 'myapp:productdetail' id %}" />

Then, in your JS:

$(document).on('click', '.alink', function () {
    var url = $("#Url").attr("data-url");
});      

I frequently use this pattern for dropdown lists so that I don't have to serve all of the options when I first render the page (and this usually speeds it up).