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:

  1. How to actually AJAX load the content
  2. How to initiate the AJAX load
  3. 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.

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.


How to initiate the AJAX load

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.


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.

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.


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.

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 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:

  1. Race - the block/JavaScript runs before its container is ready. The solution is usually to delay initialising until the container is ready for it, such as the when visble trick used to make maps work.
  2. Wait - the block is waiting for an initialisation such as a 'ready' event that has already happened. The solution is usually to trigger the event, though take care that some JavaScript may not like being initialised twice.


Additional Pages

Magic Tabs documentation

Getting Started
To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
Advanced Settings
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
Tabs with Layouts and Containers
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Global Settings
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Jump and Linking to Specific Tabs
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
Auto Play
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
Splitting a Form into Tabs
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Splitting a Page List to an Accordion
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
No Tabs
Magic tabs without the tabs!
Developing Tab Templates
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
Problem Solving
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Version History
Version history for Magic Tabs.