CODEWITHSUNDEEP
javascriptjquerydjangolocation-href
jsanchezs
jsanchezs

Reputation: 2070

Call django urls inside javascript on click event

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 !!

Upvotes: 14

Views: 47669

Answers (5)

Rotimi Ayobami
Rotimi Ayobami

Reputation: 29

You don't need to pass any of that...

Write.

 location.href = "/" + id

That's all.

Upvotes: -1

Dwipal shrirao
Dwipal shrirao

Reputation: 1

You can use javascript code " window.location.origin " , this will give base url and after that you can add "/pathname"

Upvotes: -1

Robin Bobin
Robin Bobin

Reputation: 141

The problem seems to be in that you using django template language in js static file(am i right?) Try to move that variable to html template file, ex:

<script type=text/javascript>
var a = "{% url'myapp:productdetail' id %}" </script>

And in static js file:

document.location.href = a;

Upvotes: 7

Ben
Ben

Reputation: 1092

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

Upvotes: 32

Uzbekjon
Uzbekjon

Reputation: 11813

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);
});

Upvotes: 22

Related Questions