<ajax:region>
AJAX
DESCRIPTION
ATTRIBUTES
id
EXAMPLES
Checkbox Show / Hide
MD5 Calculator
Post Category Filter
Enquiry Form
Data
Forms
Layout
Logic
Navigation
Personalisation
Standard
Templates
Regions
Third Party

<ajax:region> </...>

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

Related Controls

Content

any
The content load when ajax events reload this region.

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" size="4" style="width: 131px; height: 131px; margin-left: auto; margin-right: auto; display: block; color: #75d776" iconname="circle-check" iconstyle="regular" /> <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>