How could I include another template on a click with ajax?

Question

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?

Answer 1

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 2

Quick and dirty (with jQuery, sorry!)

<div id="templatePlaceholder"></div>

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

But read Alex's answer for proper context :)