Purpose
AJAX load heavy content after the initial page load, while showing a placeholder.
| Target | Purpose | Default |
|---|
replace (Optional) | The element to replace when the fetch request succeed | the controller root element |
| Value | Type | Description | Default |
|---|
endpoint | String | The URL to fetch content from | - |
errorMessage (Optional) | String | The error message to display when the remote content fails to load | This content failed to load |
selector (Optional) | String | The CSS selector to use to extract the desired element(s) from the returned HTML response | Empty. The entire HTML response will be loaded |
maxRetries (Optional) | Number | How many times the controller should retry fetching the content in the event of network errors or bad responses | 1 |
Events
| Event | When | Dispatched on | event.detail |
|---|
async-block:success | When the content is fetch successfully | the controller root element | - |
async-block:error | When the block fails to get a response from the endpoint | the controller root element | - |
async-block:complete | When the request finishes, regardless of success or failure | the controller root element | - |
Side Effects
None
How to Use
The controller will send out a fetch request, and on success will replace the block with the HTML content of the response.
See Also
Lazy Block Controller
Load Block Controller
Poll Block Controller