Download the PHP package richardhj/contao-ajax_reload_element without Composer

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.

Ajax Calendar

Add this to the cal_default.html5 template. Don't forget to activate ajax reload on the module.

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 (with at least the Dialog widget)
2. jquery.dialogOptions.js (can be optional, if you adjust the script)
3. 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:

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