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 }
    

        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>
    

        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
XML
PHP

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

        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>
    

        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
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.

Menu

How to Embed Asynchronous Content with hinclude.js

How to Embed Asynchronous Content with hinclude.js

Deployed on