ajax:region
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
DESCRIPTION
ATTRIBUTES
id
EXAMPLES
Checkbox Show / Hide
MD5 Calculator
Post Category Filter
Enquiry Form
Data
data:calendar data:column 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
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:region> </...>

Defines a region to be updated / re-rendered when an ajax event is fired.

Related Controls

Content

any
The content to load later.

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') ?]).

Examples

Checkbox Show / Hide

Shows or hides a block of content based on a checkbox.

HTML:

<p>Tick the box below to see a block show or hide.</p> <ajax:event id="showhide_checkbox_ajaxevent" updateregions="showhide_ajaxregion" /> <forms:form> <forms:row label="Tick this box..."> <forms:checkbox id="showhide_checkbox" onclickajax="showhide_checkbox_ajaxevent" label="Click for More Options" /> </forms:row> <ajax:region id="showhide_ajaxregion"> <logic:if test="$showhide_checkbox.checked"> <forms:row label="And then these options show..."> <forms:editbox id="moreoptions" /> </forms:row> </logic:if> </ajax:region> <forms:row type="one_column"> <forms:submitbutton>Submit Enquiry</forms:submitbutton> </forms:row> </forms:form>

Run Example

MD5 Calculator

Demonstrates an AJAX event and region to calculate a MD5 of the edit box value.

HTML:

<p>Enter text into the edit box to calculate the md5</p> <ajax:event id="ajaxevent1" updateregions="ajaxregion1" /> <forms:form> <forms:editbox id="editbox1" onkeyupajax="ajaxevent1" /> </forms:form> <br /><br /> <ajax:region id="ajaxregion1"> [? md5($editbox1.value) ?] </ajax:region>

Run Example

Post Category Filter

Display a list of Posts based on a selected Post Category

HTML:

<forms:form id="filter_blog"> <ajax:event id="filtersearch_ajaxevent" updateregions="filtersearch_ajaxregion" /> <forms:row type="two_column" label="Filter by category"> <forms:combobox id="filter_category" savestate="true" onchangeajax="filtersearch_ajaxevent"> <forms:option value="">All</forms:option> <data:repeater as="category" datasource="\Components\Website\Posts\Categories::getAll()"> <forms:option value="[? $category['post_category_id'] ?]" title="[? $category['post_category_title'] ?]" /> </data:repeater> </forms:combobox> </forms:row> </forms:form> <ajax:region id="filtersearch_ajaxregion"> <data:postrepeater paging="true" pagingrows="12" templatetype="list" variant="classic" postcategory="[? $filter_category.getValue() ?]" /> </ajax:region>

Enquiry Form

Demonstrates the use of AJAX to show/hide fields depending on the selected value in the combobox

HTML:

<forms:form id="enquiry_form" recordsubmissions="true" contactmode="store" onsubmitemail="true" onsubmitemailsubject="Website Enquiry" method="ajax"> <ajax:event id="topic_ajaxevent" updateregions="topic_ajaxregion" /> <forms:row label="First Name" type="one_column"> <forms:editbox id="contact_first_name" validations="mandatory" /> </forms:row> <forms:row label="Last Name" type="one_column"> <forms:editbox id="contact_last_name" validations="mandatory" /> </forms:row> <forms:row label="Email Address" type="one_column"> <forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower" /> </forms:row> <forms:row type="two_column" label="How can we assist you?"> <forms:combobox id="enquiry_topic" validations="mandatory" onchangeajax="topic_ajaxevent"> <forms:option value="products">Products</forms:option> <forms:option value="after_sales">After Sales</forms:option> <forms:option value="return_refund">Returns / Refund</forms:option> <forms:option value="warranty">Warranty</forms:option> </forms:combobox> </forms:row> <ajax:region id="topic_ajaxregion"> <logic:if test="$enquiry_topic.value == 'products'"> <forms:row label="Enter the items or product name" type="two_column"> <forms:editbox id="product_name" validations="mandatory" /> </forms:row> </logic:if> <logic:else test="$enquiry_topic.value == 'after_sales'"> <forms:row label="Enter your Sales/Invoice reference number" type="two_column"> <forms:editbox id="sales_invoice" validations="mandatory" /> </forms:row> </logic:else> <logic:else test="$enquiry_topic.value == 'return_refund'"> <forms:row label="Enter your receipt&nbsp;number" type="two_column"> <forms:editbox validations="mandatory" id="receipt_number" /> </forms:row> </logic:else> <logic:else test="$enquiry_topic.value == 'warranty'"> <forms:row label="Enter your warranty number" type="two_column"><forms:editbox validations="mandatory" id="warranty_code" /></forms:row> </logic:else> </ajax:region> <forms:row type="one_column"> <forms:submitbutton>Send</forms:submitbutton> </forms:row> <forms:successcontent> <p><br /></p> <standard:icon library="fontawesome" name="check-circle" size="4" style="width: 131px; height: 131px; margin-left: auto; margin-right: auto; display: block; color: #75d776" /> <p><br /></p> <h2 style="text-align: center;">Thank you! We've received your submission.</h2> <p style="text-align: center;"> One of our staff will get back to you shortly.<br /> <br /> </p> </forms:successcontent> </forms:form>