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

You are trying to access javascript variable that is created at user click on frontend within your Django template at the backend. But, you already know that it would not work.

A better option would be to reconstruct the url in javascript:

$(document).on('click', '.alink', function () {
    // Generate URL without "id" bit
    var url = "{% url 'myapp:productdetail' %}";

    var id = $(this).attr('id');

    // Construct the full URL with "id"
    document.location.href = url + "/" + id;
});

If you don't have a django url helper that would return a URL that you need, you can print out just any and simply replace it in javascript like so:

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

    // Construct the full URL with "id"
    document.location.href = url.replace('123', id);
});

Answer 2

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).