Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-09-10T06:55:29.867Z
Answers.LastActivityDate: 2019-09-10T06:55:29.867Z
Answers.UserDisplayName: Alex Roper
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-09-10T07:10:37.963Z
Answers.LastActivityDate: 2019-09-10T07:10:37.963Z
Answers.UserDisplayName: gioppe
Body: <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>
  
Tags: <templating><ajax>
Title: How could I include another template on a click with ajax?
ThreadText: # 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](https://github.com/craftcms/element-api). 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!)
  
  ```
  <div id="templatePlaceholder"></div>
  
  <script>
     var fragmentUrl = '{{ url('path/to/template') }}';
     $('#templatePlaceholder').load(fragmentUrl);
  </script>
  
  ```
  
  But read username_1's answer for proper context :)
  
  
  ---
  
  