Example - AJAX
AJAX capabilities
The options for Universal Content Puller's AJAX settings are listed under the AJAX Tab of the Advanced documentation page and are available under the Advanced tab of the Universal Content Puller edit dialog.
The examples here use the option to Ajax load when placeholder clicked so you can watch it happen. To the right, the complete Sidebar area is AJAX loaded simply by changing a couple of settings in the Advanced tab of the edit menu. Click it and see.
The AJAX loaded content here is mostly pulled from other pages, but could just as easily be pulled from stacks or any of the many content sources supported by Universal Content Puller. You can see an AJAX loaded stack on my Contact page.
To avoid the page becoming cluttered and confused with more examples, the examples below are each in an accordion panel created using Magic Tabs.
Options for AJAX loading
To get us started, we can ajax load the AJAX options from AJAX Tab of the Advanced documentation page so you can refaliarise with the options available.
This uses a Page Area Content Source, with the blocks sliced to just the few we want from a moderately complex page once you consider the tabs.
RSS Feed
The next AJAX loading example shows the NASA news RSS feed, as previous developed by Example - RSS Feed.
The first difference here is that it is only loaded when you click, rather than directly in the page. This can be useful if you want to show remote content that is a bit slow to load and you dont want it slowing down the overall page load.
The other difference is that with AJAX loading, pagination within the display is also loaded by AJAX.
In Example - RSS Feed the information was styled using some CSS in a Header Extra Content attribute. UCP doesn't know anything about that, so we would end up without our custom styles. To get round that the same Header Extra Content attribute has been added to this page.
Solving AJAX problems and a quick way to pull just one block
The page Problem Solving includes a section on AJAX loading continues to show the placeholder. We pull it in below using the Page Area content source and the same AJAX settings used on our other examples.
Because it is just one block in a fairly complex page, rather than slicing the area the source filtering option has beeen used to Only include matching blocks. On the pulled page the block has been assigned a name in the concrete5 Advanced Block Settings menu and that name used in the source filter of the Page Area content source.
Magic Tabs and AJAX
UCP is fully compatible with Magic Tabs. You can AJAX load sets of tabs and you can AJAX load content within a tab.
This page uses AJAX loading within tabs (actually an accordion) to pull content into each example. While the loadeing option used here is Ajax load when placeholder clicked, in practice you will likely want to use Ajax load when visible.
The converse, to load a set of tabs by AJAX, is what this example uses to pull tabs from the Magic Tabs documentation page Tabs and AJAX.
Here the Content Source Page Area is again used to load the entire area save for the title. An important setting is in the UCP Advanced tab. As we want scripts inside the AJAX loaded content to behave, the content must not be sanitized. Be sure to select None.
