AjaxReload.md

AjaxReload component

This component is designed to help you 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:

use Codefog\HasteBundle\AjaxReloadManager;

// Content element
$this->ajaxReloadManager->subscribe(AjaxReloadManager::TYPE_CONTENT, $contentElementId, ['foo-event']);

// Frontend module
$this->ajaxReloadManager->subscribe(AjaxReloadManager::TYPE_MODULE, $frontendModuleId, ['bar-event']);

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

<button>Refresh the module</button>

<script>
button.addEventListener('click', () => 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 in the below example:

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

Notes

The utility comes with the library-agnostic JavaScript file that is added to the page when at least one listener is 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. Still, it works on other wrapping elements such as <section> etc.