Rapid Paging Block Tutorial

Basic Configuration

Here's a short tutorial on how it get the Concrete5 Rapid Ajax Paging block up and running.

1) Add the Rapid Paging block to your page (the page that has the link on it, not the page that will be opened), into an area that is outside of the region that you'll be replacing.

2) Just keep all the default settings. It should say "Based on link: Class Name" and next to it, have the words "ajaxLink" in that field. It also should have "Main" as the area name. This is the area that will be shown in the popup. The "Page Load Target Selector" field should be a css selector path to the element on the page that you want to replace. Setting that element to #body would cause the contents of the <div id="body"> <div> tag to be replaced.

3) Create another page (anywhere on your site), and put some content in the "Main" area. This is the page that will be loaded. In this example, my target page has a url of /my_target_page/. Exit edit mode.

4) Go back to the first page, add/edit the Content block that will have the link to the ajax target page. Select the text that you want to turn into the ajax link, and click the link icon (the chain icon circled below). Add the url of the popup page (the next image below), then click on the advanced tab, and enter the word "ajaxLink" in the Classes field (the third image below). Then click the update button of both edit-dialog windows to save your changes.

5) Take the page out of edit mode. The ajax loading should now be activated for that link.

Advanced Configuration

While this approach works well for individual links, typically you'll want to use the "CSS Selector" instead of the "CSS Class Name" setting, since this will allow you to automatically activate a bunch of links at once. For example, using the "CSS Selector" option, with "#body a", will activate all of the links within the body area.

If there are certain links within an area that you've activate that you'd like to treat as normal links, you can add the css class "ignoreAjaxLink" to that link element or to any parent containing element.

To make setup rapid paging to work across a wide range of pages regardless of the entry page, it's recommended that you add the block to the global scrapbook, and reference it from that locations so that all the pages can include the same instance. If you hardcode the block display, be sure to also hardcode the required javascript and css files within the page.

Javascript within Ajax Loaded Pages

The Rapid Paging block will attempt to execute any javascript being loaded, after loading any external javascript and css files it can detect for each block. However, some block's that rely on javascript won't work correctly when being loaded through the ajax paging. This is typically because the javascript within those blocks is initiated during the pageload event, and by the time they are loaded via ajax, the pageload event has already been fired.

If you'd like to try to customize the javascript within your other blocks to work with this package, you can hook into a event that's fired after the page has completed loading:

$(document).bind('rapid_page_load', function(e, data) {
   //add your block's javascript initialization code here

« Back to the Concrete5 Rapid Ajax Paging Block project page

Like this post?
Tweet This

Enjoy this post?


Add a New Comment
(will not be made public)

Please type the letters and numbers shown in the image.Captcha Code