How to Embed Asynchronous Content with hinclude.js

Version: 3.3
Edit this page

Warning: You are browsing the documentation for version 3.3 which is not maintained anymore.

If some of your projects are still using this version, consider upgrading.

How to Embed Asynchronous Content with hinclude.js

Controllers can be embedded asynchronously using the hinclude.js_ JavaScript library. As the embedded content comes from another page (or controller for that matter), Symfony uses a version of the standard render() function to configure hinclude tags:

  • Twig
  • PHP
1
2
{{ render_hinclude(controller('...')) }}
{{ render_hinclude(url('...')) }}

Note

hinclude.js_ needs to be included in your page to work.

Note

When using a controller instead of a URL, you must enable the Symfony fragments configuration:

  • YAML
  • XML
  • PHP
1
2
3
4
# app/config/config.yml
framework:
    # ...
    fragments: { path: /_fragment }

Default content (while loading or if JavaScript is disabled) can be set globally in your application configuration:

  • YAML
  • XML
  • PHP
1
2
3
4
5
# app/config/config.yml
framework:
    # ...
    templating:
        hinclude_default_template: hinclude.html.twig

You can define default templates per render() function (which will override any global default template that is defined):

  • Twig
  • PHP
1
2
3
{{ render_hinclude(controller('...'),  {
    'default': 'default/content.html.twig'
}) }}

Or you can also specify a string to display as the default content:

  • Twig
  • PHP
1
{{ render_hinclude(controller('...'), {'default': 'Loading...'}) }}
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.