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.
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:
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.
It could be an HTML block and your own custom JavaScript or a fully featured AJAX loading addon such as Universal Content Puller. UCP provides a clean solution to AJAX loading by providing a marker and the AJAX loading mechanism behind it to pull content from stacks, areas of other pages, files or URL.
With the placeholder in a tab and some JavaScript to perform the AJAX load, you need to kick that JavaScript into action when the tab is opened.
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.
The AJAX loading options of Universal Content Puller provides such a solution without any custom code. Just place a UCP block in a tab and configure it to AJAX load when visble. It can also be configured to load when the placeholder is clicked or to be triggered from your own JavaScript to perform the AJAX load following other events.
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.
Again, Uiversal Content Puller automatically takes care of the loading of assets for AJAX loaded content. If you have your own AJAX loader, that is up to you. Simple blocks may not need any assets loaded. More complex blocks may require CSS and/or Javascript assets in order to fully render and operate.
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.
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.
For example:
When first released Ajax for Express Forms required a snippet of JavaScript to make it initialise correctly within a tab. That capability is now automated within Magic Tabs so you won't need to do anything, its all fully compatible.
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 Concrete CMS 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: