ReloadHelper.md

Haste Ajax\ReloadHelper

This utility class is designed to help handle the ajax reload of frontend modules and content elements.

Usage

First of all you need to subscribe your frontend module or content element to the events:

// Content element
\Haste\Ajax\ReloadHelper::subscribe(
    \Haste\Ajax\ReloadHelper::getUniqid(\Haste\Ajax\ReloadHelper::TYPE_CONTENT, $this->id),
    ['foo-event']
);

// Frontend module
\Haste\Ajax\ReloadHelper::subscribe(
    \Haste\Ajax\ReloadHelper::getUniqid(\Haste\Ajax\ReloadHelper::TYPE_MODULE, $this->id),
    ['bar-event']
);

// Custom
\Haste\Ajax\ReloadHelper::subscribe('my-unique-id', ['baz-event']);

Then in your markup you can refresh the subscribed modules by firing the specific event:

<a href="#" id="refresh">Refresh the module</a>

<script>
document.getElementById('refresh').addEventListener('click', function (e) {
    e.preventDefault();
    HasteAjaxReload.dispatchEvents('foo-event', 'bar-event');
});
</script>

Custom request headers

To attach your custom headers to the request you may want to provide the event as a plain data object:

HasteAjaxReload.dispatchEvents(
    {
        name: 'foo-event', 
        headers: {
            'Content-Type': 'application/json',
            'X-My-Custom-Header': 'my-custom-value'
        }
    }
);

Global JavaScript event

When the helper finishes reloading the elements it will dispatch the global event on the current document. You can listen to it like on the below example:

document.addEventListener('HasteAjaxReloadComplete', function (event) {
    console.log(event.detail);
});

Notes

The utility comes with the library-agnostic JavaScript file that is added to the page when there is at least one listener registered.

The frontend module and content element in its markup must have a single wrapper element which is usually the case with <div> container with ce_ or mod_ classes but it also works on other wrapping elements such as <section> etc.