ajax:navigation
AJAX
ajax:delayedload ajax:event ajax:navigation
DESCRIPTION
ATTRIBUTES
id
pages
updateRegions
EXAMPLES
Simple AJAX Navigation
Define Multiple Pages
ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<ajax:navigation />

Intended for use in Designs, ajax:navigation improves the performance of browser navigation by updating a list of ajax:region controls, rather than reloading the entire page.

Performance Benefits:
  • Page load times are reduced, as only the regions that need to be updated are refreshed.
  • The browser's back and forward buttons can be used to navigate between pages, without reloading the entire page.
  • Region content is pre-cached on mousedown, so that when the user clicks a link, the content is already available.

If there are several ajax:navigation controls, the one with a parent page nearest to our navigation target will have its update regions refreshed.

Where two ajax:navigation controls both define regions for the same page, a union of the regions will be updated.

Navigating to a page that does not use the same Design as the current page will cause a full page reload.
Pages must be declared in the Pages attribute, otherwise the page will not be handled by AJAX Navigation. Page content should be considered carefully, as not all page content is suitable for AJAX Navigation.

Related Controls

Attributes

id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
pages
string
Pages

Comma separated list of page Ids which should be handled by AJAX Navigation (Includes Children)
updateRegions
string|array
Update Regions

Comma separated list of ajax:region control Ids to refresh.

Examples

Simple AJAX Navigation

This ajax:navigation declares that we should update the 'content_ajaxregion' when we navigate to any page, including Home ('/')

HTML:

<ajax:navigation pages="/" updateregions="content_ajaxregion" /> <ajax:region id="content_ajaxregion"> <regions:content /> </ajax:region>

Define Multiple Pages

We can give a comma-separated list of pages that should trigger AJAX navigation.

HTML:

<logic:if test="\Components\Website\Pages::currentIsChildPageOf('/team/', false)"> <!-- If we navigate to /team/executives/ or /team/developers/, update 'team_content_ajaxregion' --> <ajax:navigation pages="/team/executives/,/team/developers/" updateregions="team_content_ajaxregion" /> <ajax:region id="team_content_ajaxregion"> <regions:content /> </ajax:region> </logic:if>