When the AJAX mechanism is triggered, it will selectively refresh any areas of the page where content has been changed as a result of a client-server request. Controls that have been changed are deleted from the page and recreated. This is more efficient than refreshing the whole HTML page.
Here are a number of common examples where the AJAX mechanism is used:
- Field value changes
- When a field value is changed, all associated field controls and controls containing field substitutions will be refreshed.
- Server-side Manual Refresh
- A control can be refreshed from a server-side script using
myControl.refresh() .
- Control Property Changes
- Whenever a server-side script affects a control’s properties, the control will be refreshed, e.g.
myControl.addCssClass(“myClass”) .
- Hiding and Showing
- When a server-side script uses the
.show() or .hide() methods on a control, a refresh will occur to add or remove the corresponding elements from the page.
- Dynamic List Rebuild
- Each time that a dynamic list is rebuilt, the list and associated field controls will be refreshed.
- If a dynamic list is set to be rebuilt on each display then it will be refreshed on every AJAX request.
- Layouts
- When controls within Field Grid, Column, Custom and Bootstrap Field layouts are refreshed, the entire content of the layout is refreshed.
When a control is refreshed via the AJAX mechanism, you should be aware of the following behaviours:
- jQuery events set in the HTML Element Properties window will be unbound and rebound. Custom Events will not automatically be rebound.
- References to the control’s original HTML elements will be lost because a new instance of the control is created.
- Client-side only changes to a control will be lost because the whole control will be refreshed by the server, e.g. If you were to add a class to an element using client-side code then that that class would be lost when the control refreshes.
We recommend to use server-side scripts to modify controls wherever possible.