Skip to content

Commit

Permalink
DOC Document general loazy-loading of DOM elements
Browse files Browse the repository at this point in the history
  • Loading branch information
GuySartorelli committed Dec 18, 2023
1 parent 20051e8 commit 5eaa7fd
Showing 1 changed file with 20 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -772,6 +772,26 @@ The URL endpoints `$AdminURL('mytabs/tab1')` and `$AdminURL('mytabs/tab2')`
should return HTML fragments suitable for inserting into the content area,
through the `PjaxResponseNegotiator` class (see above).

### Lazy loading fields on tab activation

When a tab is not lazy loaded via ajax, it might still be necessary to
delay some work (eg: when doing http requests) until the tab is activated. This is how, for example, the
[`GridFieldLazyLoader`](api:SilverStripe\Forms\GridField\GridFieldLazyLoader) works.

In order to open up the same kind of features to other fields, a custom event is fired on all nodes with the `lazy-loadable` class inside the activated tab panel.
They will receive a `lazyload` event that can be listened to in the following way (you will have to implement your own logic for "loading" the content):

```js
jQuery('.my-element.lazy-loadable').entwine({
// Use onmatch so we apply the event handler as soon as the element enters the DOM

Check failure on line 786 in en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

View workflow job for this annotation

GitHub Actions / lint-js

Expected indentation of 2 spaces but found 4
onmatch(e) {

Check failure on line 787 in en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

View workflow job for this annotation

GitHub Actions / lint-js

Expected indentation of 2 spaces but found 4
this.one('lazyload', () => {

Check failure on line 788 in en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

View workflow job for this annotation

GitHub Actions / lint-js

Expected indentation of 4 spaces but found 8
// Some init code here

Check failure on line 789 in en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

View workflow job for this annotation

GitHub Actions / lint-js

Expected indentation of 6 spaces but found 12
});

Check failure on line 790 in en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

View workflow job for this annotation

GitHub Actions / lint-js

Expected indentation of 4 spaces but found 8
},

Check failure on line 791 in en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

View workflow job for this annotation

GitHub Actions / lint-js

Expected indentation of 2 spaces but found 4
});
```

## Related

- [Howto: Extend the CMS Interface](/developer_guides/customising_the_admin_interface/how_tos/extend_cms_interface)
Expand Down

0 comments on commit 5eaa7fd

Please sign in to comment.