AjaxReloadElement for Contao Open Source CMS
AjaxReloadElement gives you the possibility to fetch a particular front end module or content element via an ajax request.
Scroll down to see some nice animated screenshots
Usage
You need to tick the box «Allow ajax reload» for the module/element in the back end input mask and include a JavaScript.
Basic/custom usage
If you are using jQuery you can use something like this. Modify this code snippet for your purposes. (Create a
j_myajaxreload.html5 template and include it in the layout.)
This code snippet will replace the HTML node .mod_my_module when clicking on a.reloadThisElementOnClick.
<script>
$(".mod_my_module a.reloadThisElementOnClick").click(function (event) {
var element;
// Don't follow the link
event.preventDefault();
// This is the elements div container like ".mod_my_module". "Allow ajax reload" has to be ticket for this element in the backend
element = $(this).closest('[class^="ce_"],[class^="mod_"]');
// Add a css class to this element. An overlay and spinning icon can be set via css
element.addClass('ajax-reload-element-overlay');
$.ajax({
method: 'POST',
url: location.href,
data: {
// The data- attribute is set automatically
ajax_reload_element: element.attr('data-ajax-reload-element')
}
})
.done(function (response, status, xhr) {
if ('ok' === response.status) {
// Replace the DOM
element.replaceWith(response.html);
}
else {
// Reload the page as fallback
location.reload();
}
});
});
</script>Ajax Calendar
Add this to the cal_default.html5 template. Don't forget to activate ajax reload on the module.
<script>
$(".calendar .head.previous a, .calendar .head.next a").click(function (event) {
var element;
// Get url of next/previous month
var $url = window.location.origin + '/' + $(this).attr('href');
// Don't follow the link
event.preventDefault();
// This is the element's div container like ".mod_my_module". "Allow ajax reload" has to be enabled for this module in the back end
element = $(this).closest('[class^="ce_"],[class^="mod_"]');
// Add a css class to this element. An overlay and spinning icon can be set via css.
element.addClass('ajax-reload-element-overlay');
$.ajax({
method: 'POST',
url: $url,
data: {
// The data- attribute is set automatically
ajax_reload_element: element.attr('data-ajax-reload-element')
}
})
.done(function (response, status, xhr) {
if ('ok' === response.status) {
// Replace the DOM
element.replaceWith(response.html);
} else {
// Reload the page as fallback
location.reload();
}
});
});
</script>Ajax forms
This one comes out of the box.
For all modules that integrate forms, you can tick the box «Update a form via ajax». Additionally, the template "j_ajaxforms" has to be included in the page layout. Instead of reloading the entire page, forms will update itself.
This feature is supported for all Contao core forms like change password, personal data, login form etc. and forms from third-party apps that are programmed in Contao style.
Demonstration
When the login was successful, the redirect processed in the login form will be followed.
Modal editing
This one is a bit more advanced.
First of all, this is the list of requirements for this plugin:
- jquery-ui.js (with at least the
Dialogwidget) - jquery.dialogOptions.js (can be optional, if you adjust the script)
- jQuery.modal-editing.js (the jQuery plugin written for this extension)
Then we create a template called j_modal_editing.js and include it in the page layout:
<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/jquery-ui.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/jquery.dialogOptions.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/jquery.modal-editing.js';
?>
<script>
$(function () {
$(document).modalEditing({
container: '.mm-list-participants',
trigger: '.item a',
element: 'mod::24',
closeText: 'Schließen', /* If you want to internationalize the label, you can use (with Haste installed): <?= Haste\Util\Format::dcaLabel('default', 'close'); ?>*/
title: 'Edit element'
});
$(document).modalEditing({
container: '.mm-list-participants',
trigger: '.addUrl a',
element: 'mod::24',
closeText: 'Close',
title: 'Add element'
});
});
</script>This code snippet is tailored to a MetaModel frontend editing. You set the id of the editing form as the element
option. In addition, you enable the ajax form as stated above (see paragraph «Ajax forms»).
Demonstration
