onclick load {% include 'test.html' %}

Question

I would like to load Jinja2 templating string when user clicks on an element. for example I have tags like:

 <div class="one"><a href="#one">One</a></div>
 <div class="two"><a href="#two">Two</a></div>
 <div class="three"><a href="#three">Three</a></div>

only after clicking on One, I must load the bellow string:

{% include 'one.html' %}

and after clicking on Two, this string must be loaded:

{% include 'two.html' %}

and so on. How can I manage this issue? Dynamic content loading when clicking

Answer 1

You will have to use some JavaScript to achieve that.

One solution is to use jQuery load http://api.jquery.com/load/

Answer 2

Keep in mind that JavaScript happens in the browser (client-side), while Jinja2 is python-based templating which will occur server-side. Showing the template string via JavaScript will not achieve your desired result. There seem to be two ways of achieving what you want.

One option is to output the result of the template when the page loads initially and then display it through some javascript behavior. There are many jQuery plugins to achieve this result, one example you may look at is Bootstrap Tabs .

Another option, if you don't wish to produce all of the template results when you first load the page, would be to load the result of the templates via ajax. The ajax request would need have to be served the result of the desired jinja2 template which can then be output into your page. jQuery's load provides a simple way to do this.