Tabs and AJAX
Loading tab sets
AJAX loading tab sets
Magic Tabs can be used with AJAX capable loaders such as Universal Content Puller. If you have a tab set in a page area or stack and AJAX load that page area or stack, Magic Tabs will render the tab set when the AJAX load is completed.
If its a straight AJAX load into a page, perhaps lazy loading on scroll or in response to a user action, then you are unlikely to have any issues. Magic Tabs will handle it nicely (but its up to you to be sure blocks inside the tab set are AJAX compatible).
If the AJAX load of a set of tabs is already within a tab of an already rendered set of tabs, its important to consider that the AJAX loaded tab set does not know about the context of the tabs surrounding it. It was not privvy to the sequence in which other blocks on the page were rendered. Hence it doesn't know about nested tabs and you need to start the AJAX loaded tab set with 'Increase Nesting Level' and end it with 'End Current Level' or explicitly set a level for the tabs that is inside any containing tab level. The limit of 2 levels of nested tabs still applies.
Loading tab content
AJAX loading tab content
Sometime you may want to delay the loading of tab content. For example, in a big set of tabs or accordion, perhaps you want to lazy load some or all of the tabs as and when they are opened.
There are three problems to solve:
- How to actually AJAX load the content
- How to initiate the AJAX load
- Will the AJAX loaded blocks render correctly?
How to actually AJAX load the content
You need a placeholder in the page to replace with the AJAX loaded content and a loader to actually replace the placeholder with the AJAX loaded content. Magic Tabs doesn't do any of this for you.
How to initiate the AJAX load
For example, you could listen for a Magic Tabs event such as 'jl_magic_tabs_done' and use that to trigger your AJAX loader. Another approach is for the loader to wait for the placeholder to become visible, using a similar trick like that used to render maps blocks when they become visible.
Will the AJAX loaded blocks render correctly?
This is entirely up to the blocks themselves, but your AJAX loader can help things along by loading any assets required by the AJAX loaded content.
Once loaded, blocks containing interactions may need to be initialised. For example, Magic Tabs listens out for AJAX loaded tab sets and sets them running, as described in the first tab of this page.
Interaction in tabs
AJAX interactions within tabs
This is really up to the individual blocks. Blocks implementing interactions need to be aware that their container may not be visible when they are first rendered.
The core Google Maps block (which behind the scenes is full of AJAX interaction) required a small modification to delay initialisation until it is visible. That was fully implemented in the concrete5 core so you won't need to do anything, its all fully compatible.
As well as providing options for AJAX loading, Universal Content Puller is designed to work when it has been AJAX loaded itself, so you can have an AJAX loaded set of tabs and within those tabs AJAX load content for individual tabs.
Problems to resolve fall into 2 categories: