Skip to content

Latest commit

 

History

History
123 lines (89 loc) · 3.94 KB

hinclude.rst

File metadata and controls

123 lines (89 loc) · 3.94 KB
.. index::
    single: Templating; hinclude.js

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:

{{ 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:

.. configuration-block::

    .. code-block:: yaml

        # config/packages/framework.yaml
        framework:
            # ...
            fragments: { path: /_fragment }

    .. code-block:: xml

        <!-- config/packages/framework.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
                https://symfony.com/schema/dic/services/services-1.0.xsd
                http://symfony.com/schema/dic/symfony https://symfony.com/schema/dic/symfony/symfony-1.0.xsd">

            <!-- ... -->
            <framework:config>
                <framework:fragment path="/_fragment"/>
            </framework:config>
        </container>

    .. code-block:: php

        // config/packages/framework.php
        $container->loadFromExtension('framework', [
            // ...
            'fragments' => ['path' => '/_fragment'],
        ]);

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

.. configuration-block::

    .. code-block:: yaml

        # config/packages/framework.yaml
        framework:
            # ...
            fragments:
                hinclude_default_template: hinclude.html.twig

    .. code-block:: xml

        <!-- config/packages/framework.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
                https://symfony.com/schema/dic/services/services-1.0.xsd
                http://symfony.com/schema/dic/symfony https://symfony.com/schema/dic/symfony/symfony-1.0.xsd">

            <!-- ... -->
            <framework:config>
                <framework:fragments hinclude-default-template="hinclude.html.twig"/>
            </framework:config>
        </container>

    .. code-block:: php

        // config/packages/framework.php
        $container->loadFromExtension('framework', [
            // ...
            'fragments' => [
                'hinclude_default_template' => [
                    'hinclude.html.twig',
                ],
            ],
        ]);


.. versionadded:: 4.3

    The ``framework.fragments.hinclude_default_template`` option was introduced
    in Symfony 4.3. In previous Symfony versions it was called
    ``framework.templating.hinclude_default_template``.

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

{{ render_hinclude(controller('...'),  {
    'default': 'default/content.html.twig'
}) }}

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

{{ render_hinclude(controller('...'), {'default': 'Loading...'}) }}