Cover of the book Symfony 5: The Fast Track

Symfony 5: The Fast Track is the best book to learn modern Symfony development, from zero to production. +300 pages showcasing Symfony with Docker, APIs, queues & async tasks, Webpack, SPAs, etc.

  1. Home
  2. Documentation
  3. Templating
  4. How to Embed Asynchronous Content with hinclude.js
WARNING:

You are browsing the documentation for Symfony 3.0 which is not maintained anymore.

Consider upgrading your projects to Symfony 5.2.

How to Embed Asynchronous Content with hinclude.js

3.0 version
Maintained
4.4 5.2 current 5.3 dev
Unmaintained
2.7 2.8 3.0 3.1 3.2 3.3 3.4 4.0 4.1 4.2 4.3 5.0 5.1

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
    1
2
    {{ render_hinclude(controller('...')) }}
{{ render_hinclude(url('...')) }}
  • PHP
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <?php echo $view['actions']->render(
    new ControllerReference('...'),
    array('renderer' => 'hinclude')
) ?>

<!-- The url() method was introduced in Symfony 2.8. Prior to 2.8, you
     had to use generate() with UrlGeneratorInterface::ABSOLUTE_URL
     passed as the third argument. -->
<?php echo $view['actions']->render(
    $view['router']->url('...'),
    array('renderer' => 'hinclude')
) ?>

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
    1
2
3
4
    # app/config/config.yml
framework:
    # ...
    fragments: { path: /_fragment }
  • XML
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:framework="http://symfony.com/schema/dic/symfony"
    xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/symfony http://symfony.com/schema/dic/symfony/symfony-1.0.xsd">

    <!-- ... -->
    <framework:config>
        <framework:fragments path="/_fragment" />
    </framework:config>
</container>
  • PHP
    1
2
3
4
5
    // app/config/config.php
$container->loadFromExtension('framework', array(
    // ...
    'fragments' => array('path' => '/_fragment'),
));

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

  • YAML
    1
2
3
4
5
    # app/config/config.yml
framework:
    # ...
    templating:
        hinclude_default_template: hinclude.html.twig
  • XML
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:framework="http://symfony.com/schema/dic/symfony"
    xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/symfony http://symfony.com/schema/dic/symfony/symfony-1.0.xsd">

    <!-- ... -->
    <framework:config>
        <framework:templating hinclude-default-template="hinclude.html.twig" />
    </framework:config>
</container>
  • PHP
    1
2
3
4
5
6
7
8
9
    // app/config/config.php
$container->loadFromExtension('framework', array(
    // ...
    'templating' => array(
        'hinclude_default_template' => array(
            'hinclude.html.twig',
        ),
    ),
));

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

  • Twig
    1
2
3
    {{ render_hinclude(controller('...'),  {
    'default': 'default/content.html.twig'
}) }}
  • PHP
    1
2
3
4
5
6
7
    <?php echo $view['actions']->render(
    new ControllerReference('...'),
    array(
        'renderer' => 'hinclude',
        'default'  => 'default/content.html.twig',
    )
) ?>

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

  • Twig
    1
    {{ render_hinclude(controller('...'), {'default': 'Loading...'}) }}
  • PHP
    1
2
3
4
5
6
7
    <?php echo $view['actions']->render(
    new ControllerReference('...'),
    array(
        'renderer' => 'hinclude',
        'default'  => 'Loading...',
    )
) ?>

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.