richardhj / contao-ajax_reload_element
AjaxReloadElement for Contao OpenSource CMS
Installs: 3 404
Dependents: 0
Suggesters: 0
Security: 0
Stars: 14
Watchers: 4
Forks: 5
Open Issues: 5
Type:contao-bundle
Requires
- php: >=5.5
- contao-community-alliance/composer-plugin: ^3.0
- contao-community-alliance/url-builder: ^1.2
- contao/core-bundle: ^4.4
- symfony/http-foundation: ^3.3 || ^4.0 || ^5.0
This package is auto-updated.
Last update: 2024-11-05 20:30:59 UTC
README
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
Dialog
widget) - 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»).