How to send django url with parameters to ajax request?

Question

Currently, I am sending url to the ajax as :

    $('.togglebtn').on("click",function(){
         console.log("Hello")
         $.ajax({
            type: 'GET',
            url: "http://localhost:8000/toggle/2945016571198",
            contentType: 'application/json',
            success: function (data) {
                  appendData(data);
                   function appendData(data) {
            var mainContainer = document.getElementById("switch_{{forloop.counter}}");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML = '<tr>' + data[i].line_items + ' ' + data[i].nomenclature+'</tr>' ;
                mainContainer.appendChild(div);
            }
        }
            }
  });

Currently, I am sending request into a static url. Can we use {% url toggle i.id %} to set the url dynamically in the ajax request? Does this ajax function repeats at all or not?

The Pjot · Accepted Answer · 2022-01-04 08:39:35Z

1

Not in that way or fashion, the {% url toggle i.id %} is for the Django template, so that is executed when rendering the page server side. What you want to do is client side.

Your are also trying to use "switch_{{forloop.counter}}", which won't work unless you have multiple snippets of the 'click' function. Which I would advise against since it simply doesn't make sense. You define a function once and then use it. See first example.

Best thing I can think of is exposing a 'base url' in your template and use that in javascript. For example in your Django template:

<script>
// Put the Django variable into javascript context.
toggle_base_url = {{ toggle_base_url_from_django_view_context }};
// Use it in your ajax url by combining strings.
 $('.togglebtn').on("click",function(){
         console.log("Hello")
         var obj = $(this); // Save the clicked button for reference.
         var objectId = obj.attr('id');
         var buttonId = obj.attr('data-button-id');
         $.ajax({
            type: 'GET',
            url: toggle_base_url + "/" + buttonId
            contentType: 'application/json',
            success: function (data) {
                // Cannot use 'this' in this context (IIRC), use the obj var we assigned.
                // Replace with something to find your parent container
                // Could use have a attribute on your button that points to the container.
                // Probably the number you use in the url?
                var mainContainer = obj.parent('containerclass');
                for (var i = 0; i < data.length; i++) {
                    var div = document.createElement("div");
                    div.innerHTML = '<tr>' + data[i].line_items + ' ' + data[i].nomenclature+'</tr>' ;
                    mainContainer.appendChild(div);
                }
            }
        }
  });

</script>

In your Django view you do something like this:


# Make a base url to reuse, remove the last part.
# So turn `/toggle/1` into `/toggle`
base_url = reverse('toggle', args=[1]).rsplit('/', 1)
context = {
    'toggle_base_url_from_django_view_context': base_url,
}
return render(request, 'yourtemplate.html', context=context)

edited Jan 4, 2022 at 8:39

answered Jan 4, 2022 at 7:57

The Pjot

1,8581 gold badge13 silver badges21 bronze badges

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

6 Comments

Rikky Bhai Over a year ago

{{ toggle_base_url_from_django_view_context }}; refers to?

Rikky Bhai Over a year ago

you are simply adding the params part as string, so the params part is also dynamic.

The Pjot Over a year ago

Added a Django view snippit to explain the toggle_base_url_from_django_view_context. I understand the params is dynamic, but not where you expect to retrieve it from :) Hence the obj.attr('id') example, could use that for the dynamic part.

The Pjot Over a year ago

Added the buttonId and used that in the URL, hope that clarifies it.

The Pjot Over a year ago

Right, my bad! Fixed it. Downside of writing pseudo code outside of a runserver. Hope this help you in the right direction!

|

Collectives™ on Stack Overflow

How to send django url with parameters to ajax request?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related