Send Dynamic AJAX URL in Django

Question

I have ajax function like this which is working fine:

 function show_tasks() {
              $.ajax({
                        type: "GET",
                        url: "/2/todos/", //I want url: "/{{ category.id }}/todos/"
                        success: function(data){
                             $('#tasks').html(data)
                             .css("display", "block");       
                        }
                    });
        }

HTML contents

{% for category in categories %}
    <tr>
    <td width="5%"><input type="checkbox" value="{{ category.id }}" name="category_name" id="category{{ forloop.counter }}" /></td>   
    <td>
        <a data-toggle="tooltip" title="Show Tasks" onclick="show_tasks()">
            {{ category.name }}</a>

{% endfor %}

How can I do this?

alko · Accepted Answer · 2013-10-23 08:02:55Z

3

Construct url in html with template processor, something like:

...
<a data-toggle="tooltip" title="Show Tasks" 
   onclick="show_tasks({% url 'category_todo' category.id %})">
...

and add url support in your javascript:

function show_tasks(url){...
   url: url,
   ...
}

answered Oct 23, 2013 at 8:02

alko

48.7k12 gold badges99 silver badges105 bronze badges

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

4 Comments

pynovice Over a year ago

I passed {{category_id}} as argument to show_tasks() function and it worked. Thanks mate!

Henrik Andersson Over a year ago

-1, This is real bad practice. If you're doing this you should be damn sure about what you're doing.

alko Over a year ago

@limelights yes, you can construct url in js, but what if your url patter changes later on? say it will be /cat.id/todos/new/ or so? It is surely easier to maintain it all in one place, in urls.py. And will appreciate few words on why this is bad practice, can't in fact imagine any except html size.

Henrik Andersson Over a year ago

1 - You're coupling your view with your javascript by using onclick - this leads to several things but most your forgoing the unobtrusive javascript design process. 2 - You're currently mixing 3 languages in one go. html(javascript(django-template-lang)). If you want to have the url still "maintainable", put the URL in a hidden input tag and fetch it via javascript instead.

Tim Edgar · Accepted Answer · 2013-10-23 08:03:02Z

2

You can use this to get the dom element that generated the click event in your show_tasks function. From there, just use jquery to find the value of the adjacent checkbox.

You can do something like var category = $(this).closest('input').attr('value') in show_tasks to get the category id and supply it to $.ajax like url : "/" + category + "/todos/".

answered Oct 23, 2013 at 8:03

Tim Edgar

2,14314 silver badges11 bronze badges

Collectives™ on Stack Overflow

Send Dynamic AJAX URL in Django

HTML contents

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML contents

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related