How to Embed Asynchronous Content with hinclude.js

Warning: You are browsing the documentation for Symfony 3.0, which is no longer maintained.

Read the updated version of this page for Symfony 6.1 (the current stable version).

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.

How to Embed Asynchronous Content with hinclude.js

How to Embed Asynchronous Content with hinclude.js

What is Symfony?

Learn Symfony

Screencasts

Community

Blog

Services

Deployed on