Django include template using Javascript

Question

I came from a Rails background thus the question may seem stupid. In Rails, when we create a Ajax request, then we can update a view by rendering a partial using the javascript selector like the following:

$("#dashboardEmails").html("<%=j render partial: 'emails', locals: {emails: @emails} %>");

How can I do that in Django template? I've tried the following:

$.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize() + "&submit=connect",
        success: function (data) {
          if(data['tables'].length > 0){
            $('#data-connection-info').html("{% include 'projects/connection_info.html' with data='"data"' %}");
          }
          console.log(data);
        },
        error: function (data) {
          console.log("Error");
        }
});

Here, I want to update the view with a template projects/connection_info.html, also passing a javascript variable (data) to the template using with. But it is not working.

Any idea how can I achieve that?

UPDATE

I passed the template from the view like:

template = render_to_string('projects/connection_info.html', json_data)
return HttpResponse(json.dumps(template), content_type='application/json')

Then in the ajax success function updates the DOM:

success: function (data) {
          $('#data-connection-info').html(data);
 }

In this way the problem is solved. :)

you can't do it this way, but you can return from your django view full rendered html or empty string and always set the result inside the DOM. — user8060120
– user8060120, Commented Sep 25, 2018 at 6:33
save the html of the template in a variable. var connection_info_html ={% include 'projects/connection_info.html' %} After ajax success change use that variable to update DOM . Django's include, extends etc are processed on the server so once the html is rendered you can't use it. — Vaibhav Vishal
– Vaibhav Vishal, Commented Sep 25, 2018 at 6:37
One thing you can do is use render_to_string and return a JsonResponse in the view. Then you can just insert the result into the page using javascript via a method like .html — DisneylandSC
– DisneylandSC, Commented Sep 25, 2018 at 7:06
@DisneylandSC I passed the template with render_to_string and HttpResponse. Now the .html updates the dom element, but the data passed with the template are not accessible into the passed template. — Emu
– Emu, Commented Sep 25, 2018 at 7:34

Emu · Accepted Answer · 2018-09-25 07:39:50Z

2

I passed the template from the view like:

template = render_to_string('projects/connection_info.html', json_data)
return HttpResponse(json.dumps(template), content_type='application/json')

Then in the ajax success function updates the DOM:

success: function (data) {
          $('#data-connection-info').html(data);
 }

In this way the problem is solved. :)

answered Sep 25, 2018 at 7:39

Emu

5,9253 gold badges35 silver badges52 bronze badges

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

1 Comment

bruno desthuilliers Over a year ago

Why json.dumps() the rendered template ??? A plain html response works as well.

Collectives™ on Stack Overflow

Django include template using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related