<p>Primarily, this is a Javascript question, not a Craft CMS question. For the Javascript part of this, I would look for general AJAX tutorials or try searching on Stack Overflow.</p>

<p>But rather than downvote this question as being off-topic, here are some things to help on the Craft CMS side of things. </p>

<p>You can create a template to generate a chuck of HTML you want to include in other pages. </p>

<p>For example, if you create a file called:</p>

<pre><code>/templates/includes/example.twig
</code></pre>

<p>You can access that from <code>http://mysite.com/includes/example</code> no matter if it's directly in a browser or thru an Ajax request from another page.</p>

<p>If you need to test wether a template is being accessed directly thru a browser or an Ajax request, you can test that with <code>craft.app.request.isAjax</code>:</p>

<pre><code>{% if craft.app.request.isAjax %}
  Yep
{% else %}
  Nope
{% endif %}
</code></pre>

<p>If you'd rather have your Javascript deal with JSON data instead of a chuck of HTML code, you have a few options.</p>

<p>You can name a file with the .json extension and file-based routing will automatically serve that URL as the content type 'application/json'.</p>

<pre><code>/templates/includes/example.json
</code></pre>

<p>Or you can use the <a href="https://github.com/craftcms/element-api" rel="nofollow noreferrer">Element API plugin</a>. This is a much more performant solution, but require some PHP knowledge.</p>

CC BY-SA 4.0
2019-09-10T06:55:29.867Z
2019-09-10T06:55:29.867Z
Alex Roper
<p>Quick and dirty (with jQuery, sorry!)</p>

<pre><code>&lt;div id="templatePlaceholder"&gt;&lt;/div&gt;

&lt;script&gt;
   var fragmentUrl = '{{ url('path/to/template') }}';
   $('#templatePlaceholder').load(fragmentUrl);
&lt;/script&gt;
</code></pre>

<p>But read Alex's answer for proper context :)</p>

CC BY-SA 4.0
2019-09-10T07:10:37.963Z
2019-09-10T07:10:37.963Z
gioppe
<p>I am a newbie with ajax and I have to display a template only when clicking on a button. This template is weighing and it will be on all pages, so I want to use ajax.</p>

<p>Someone can help me?</p>

<templating><ajax>
How could I include another template on a click with ajax?
# How could I include another template on a click with ajax?

(Asked by: username_0 on 2019-09-09)

I am a newbie with ajax and I have to display a template only when clicking on a button. This template is weighing and it will be on all pages, so I want to use ajax.

Someone can help me?

**Tags:** templating, ajax

---

## 2 answers

### Answer by username_1 on 2019-09-10. Score: 4

Primarily, this is a Javascript question, not a Craft CMS question. For the Javascript part of this, I would look for general AJAX tutorials or try searching on Stack Overflow.
But rather than downvote this question as being off-topic, here are some things to help on the Craft CMS side of things. 
You can create a template to generate a chuck of HTML you want to include in other pages. 
For example, if you create a file called:
/templates/includes/example.twig

You can access that from http://mysite.com/includes/example no matter if it's directly in a browser or thru an Ajax request from another page.
If you need to test wether a template is being accessed directly thru a browser or an Ajax request, you can test that with craft.app.request.isAjax:
{% if craft.app.request.isAjax %}
  Yep
{% else %}
  Nope
{% endif %}

If you'd rather have your Javascript deal with JSON data instead of a chuck of HTML code, you have a few options.
You can name a file with the .json extension and file-based routing will automatically serve that URL as the content type 'application/json'.
/templates/includes/example.json

Or you can use the Element API plugin. This is a much more performant solution, but require some PHP knowledge.


---

### Answer by username_2 on 2019-09-10. Score: 2

Quick and dirty (with jQuery, sorry!)




But read Alex's answer for proper context :)


---

