`<ajax:event />`

AJAX events define an interaction sequence between a client and the server.
Typically, javascript will trigger the AJAX event which executes code and updates a region on the page.
For example, ticking a box might send data to the server, and depending on it's value, show or hide additional content on the page.

Any javascript event on an Oncord control can trigger an ajax event.
Just specify the native event name, suffixed by ajax.
For instance: onclickajax="..." and onchangeajax="...".

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

- `onSuccess`

string

JavaScript to be executed when ajax event completes successfully

- `onSuccessCloseDialog`

int

Closes the dialog box on the client

- `onSuccessToastMessage`

string

The toast message to be displayed upon successful server command

- `onTrigger`

string

JavaScript to be executed when ajax event is triggered

- `showLoading`

bool

Whether to show a loading message. Default = true.

- `showLoadingMessage`

string

The text to display inside the loading message

- `updateRegions`

string|array

Sets which ajax:region controls to refresh

Examples

Checkbox Show / Hide

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

HTML:

Tick the box below to see a block show or hide. <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:

Enter text into the edit box to calculate the md5 <ajax:event id="ajaxevent1" updateregions="ajaxregion1" /> <forms:form> <forms:editbox id="editbox1" onkeyupajax="ajaxevent1" /> </forms:form> <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 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> <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" /> <h2 style="text-align: center;">Thank you! We've received your submission.</h2> One of our staff will get back to you shortly. </forms:successcontent> </forms:form>