Sign up to our newsletter to receive updates on Winter CMS releases,
new features in the works, and much more.
We'll never spam or give
this address away.
Winter includes a framework that brings a full suite of AJAX capabilities which allow you to load data from the server without a browser page refresh. The same library can be used in CMS themes and anywhere in the backend administration area.
The AJAX framework comes in two flavors, you may either use the JavaScript API or the data attributes API. The data attributes API doesn't require any JavaScript knowledge to use AJAX with Winter.
The AJAX framework is optional in your CMS theme, to use the library you should include it by placing the {% framework %}
tag anywhere inside your page or layout. This adds a reference to the Winter frontend JavaScript library. The library requires jQuery so it should be loaded first, for example:
<script src="{{ 'assets/javascript/jquery.js' | theme }}"></script>
{% framework %}
The {% framework %}
tag supports the optional extras parameter. If this parameter is specified, the tag adds StyleSheet and JavaScript files for extra features, including form validation and loading indicators.
{% framework extras %}
A page can issue an AJAX request either prompted by data attributes or by using JavaScript. Each request invokes an event handler -- also called an AJAX handler -- on the server and can update page elements using partials. AJAX requests work best with forms, since the form data is automatically sent to the server. Here is request workflow:
update
option.NOTE: Depending on the page context a CMS partial or backend partial view will be rendered.
Below is a simple example that uses the data attributes API to define an AJAX enabled form. The form will issue an AJAX request to the onTest
handler and requests that the result container be updated with the mypartial
partial markup.
<!-- AJAX enabled form -->
<form data-request="onTest" data-request-update="mypartial: '#myDiv'">
<!-- Input two values -->
<input name="value1"> + <input name="value2">
<!-- Action button -->
<button type="submit">Calculate</button>
</form>
<!-- Result container -->
<div id="myDiv"></div>
NOTE: The form data for
value1
andvalue2
are automatically sent with the AJAX request.
The mypartial
partial contains markup that reads the result
variable.
The result is {{ result }}
The onTest handler method accessed the form data using the input
helper method and the result is passed to the result
page variable.
function onTest()
{
$this->page['result'] = input('value1') + input('value2');
}
The example could be read like this: "When the form is submitted, issue an AJAX request to the onTest
handler. When the handler finishes, render the mypartial
partial and inject its contents to the #myDiv
element."
Sign up to our newsletter to receive updates on Winter CMS releases,
new features in the works, and much more.
We'll never spam or give
this address away.
Released October 20, 2022
14 UX/UI Improvements, 25 API Changes, 33 Bug Fixes, 4 Security Improvements, 5 Translation Improvements, 1 Performance Improvement, 2 Community Improvements, 2 Dependencies, 0 New Contributors
* @cstorus made their first contribution in https://github.com/wintercms/winter/pull/616
* @simonmannsfeld made their first contribution in https://github.com/wintercms/winter/pull/623
* @quangtrongonline made their first contribution in https://github.com/wintercms/winter/pull/636
* @nathanlesage made their first contribution in https://github.com/wintercms/winter/pull/665
* @vllvll made their first contribution in https://github.com/wintercms/winter/pull/669
* @robertalexa made their first contribution in https://github.com/wintercms/winter/pull/668
* @iamyigitkoc made their first contribution in https://github.com/wintercms/winter/pull/624
* @hecc127 made their first contribution in https://github.com/wintercms/winter/pull/682
* @prsuhas made their first contribution in https://github.com/wintercms/winter/pull/723