Include django template file with Jquery html

Question

I am trying to reload a DIV that has the following in it from before.

<div id="mydiv">{% include "comments/comments.html" %}</div>

What I want to do is this when I click a button;

$('#mydiv').html('{% include "comments/comments.html" %}</div>

But putting the django tag inside the jquery html function makes javascript very unhappy. I know that this can be solved with .load() but that would mean I would have to rewrite my entire logic which would break other stuff.

Any jQuery calls will happen after the DOM is loaded. While any include statements will happen before. So this approach will not work. If you don't want to use $.load() you could include into a hidden element, then use jQuery to .show(). I'd use .load(). — Rob L
– Rob L, Commented Jan 22, 2014 at 16:14
Thanks. Makes sense. I was hoping that it was possible to "re-include" it with jQuery. Guess I'll just have to rework my applogic. — Kent Heide
– Kent Heide, Commented Jan 22, 2014 at 20:50

Stephen · Accepted Answer · 2021-07-07 22:10:44Z

1

Use Template Literals and given your post date, they would have been called Template Strings in ES5.

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

Template literals

JQuery keeps breaking when you paste the HTML code from the HTML file because it takes in a string, not HTML, and putting " or ' around {% include ... %} will break from any of the same characters in your comments.html. Put backticks around your comments.html file then import it with Django in a JQuery method.

`<div id='mainpanel{{ i.id }}' class='panel panel-default'>
   <div class='panel-heading clearfix'>
      <b class='panel-title'>{{ i.itemfullname|escapejs }}</b>
      <a id='close{{i.id}}' class='btn btn-default btn-sm pull-right'>X</a>
   </div>
<div>`

edited Jul 7, 2021 at 22:10

answered Oct 31, 2017 at 20:06

Stephen

1,1481 gold badge21 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Include django template file with Jquery html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related