Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/richardhj/contao-ajax_reload_element
AjaxReloadElement for Contao Open Source CMS
https://github.com/richardhj/contao-ajax_reload_element
ajax-form contao contao-bundle contao-module
Last synced: about 2 months ago
JSON representation
AjaxReloadElement for Contao Open Source CMS
- Host: GitHub
- URL: https://github.com/richardhj/contao-ajax_reload_element
- Owner: richardhj
- License: lgpl-3.0
- Created: 2016-06-01T20:11:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-25T14:25:32.000Z (10 months ago)
- Last Synced: 2024-09-26T09:11:53.435Z (3 months ago)
- Topics: ajax-form, contao, contao-bundle, contao-module
- Language: PHP
- Size: 122 KB
- Stars: 14
- Watchers: 4
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AjaxReloadElement for Contao Open Source CMS
[![Latest Version on Packagist][ico-version]][link-packagist]
[![Software License][ico-license]]()
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`.
```html
$(".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();
}
});
});
```
### Ajax Calendar
Add this to the `cal_default.html5` template. Don't forget to activate ajax reload on the module.
```html
$(".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();
}
});
});
```
### 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:
1. [jquery-ui.js](https://jqueryui.com/download/) (with at least the `Dialog` widget)
2. [jquery.dialogOptions.js](https://github.com/jasonday/jQuery-UI-Dialog-extended) (can be optional, if you adjust the script)
3. [jQuery.modal-editing.js](https://gist.github.com/richardhj/27345239b7326e98658a8a4dff599736) (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
$(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'
});
});
```
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
[ico-version]: https://img.shields.io/packagist/v/richardhj/contao-ajax_reload_element.svg?style=flat-square
[ico-license]: https://img.shields.io/badge/license-LGPL-brightgreen.svg?style=flat-square
[link-packagist]: https://packagist.org/packages/richardhj/contao-ajax_reload_element