Use django include tag with innerHTML

Using Django
1

Hello, I ran into some error while doing my app.

21 function addWidget(docId) {
22 var newWidget = document.createElement(“div”);
23 …
24 newWidget.innerHTML = “{% include ‘widgets/news.html’ %}”; <— /!
25
26 container = document.getElementById(“widgetContainer”);
27 container.appendChild(newWidget);
28 }

So as you see I am trying ot add a include tag to include html, into an innerHTML tag for an object I just created. gives me the following generic error on line 24 :
Uncaught SyntaxError: Unexpected identifier

And when I clic on the button triggering this function :
Uncaught ReferenceError: addWidget is not defined
at HTMLButtonElement.onclick

Also, when I checked the code of the page produced, line 24 had been changed to :
newWidget.innerHTML = "


And this cas causing a problem. Any help would be appreciated
2

This is JavaScript code? Is this part of a template you are rendering?

There’s not enough context here for me to be sure, so I’ll just remind you that JavaScript is executed in the browser, while the {% include ... %} template tags are rendered in the server before the page is sent out to the browser. If you’re sending that literal string out to the browser within the JavaScript without being rendered, it’s not going to work the way you might want it to work.

3

Hey, thanks for the quick response,
yes you are right, it is javascript inside a .html template, an I am trying to rendre django…

And yes, I didn’t think about the fact that js is rendered after django…
Do you have any idea on how to do that ?

4

Do what? I’m not clear on what you’re really trying to accomplish here or, more importantly, what the desired end-result is.

5

I am creating a dashboard app, so you can remove widgets for the dashboard (no problem since they are rendered before sending the .html) but I allso want to be able to add widgets to the dashbboard.

6

Two basic options here, depending upon how many “widget templates” you have and how much server-interaction is going to be necessary to create / render them.

To render them all before sending out the page, you could render them as part of your template in a hidden div, and then copy them to the appropriate part of your page when needed. (You could also render them as text in a JSON element and include them as data within the page, but that seems to me to be more work than necessary - others are likely to have different opinions on this.)

If they need to be created more dynamically, you could create views and templates that render just those components as page fragments, and issue an AJAX request to retrieve those fragments as necessary to add them to the page.

7

very very smart much intellect I didn’t think about that, I am going to do that thanks.

8

To add to what @KenWhitesell stated, you might want to check out https://htmx.org/docs/ which is a light JS tool for doing exactly the kind of fragment replacment via AJAX that Ken mentioned. It looks like a slick way to get some dynamic markup without requiring something like jQuery or a pile of JS code.

1 Like