richardhj/contao-ajax_reload_element

AjaxReloadElement for Contao OpenSource CMS

AjaxReloadElement for Contao Open Source CMS

![Software License][ico-license], _(*1)

AjaxReloadElement gives you the possibility to fetch a particular front end module or content element via an ajax request., _(*2)

Scroll down to see some nice animated screenshots 😎, _(*3)

Usage

You need to tick the box «Allow ajax reload» for the module/element in the back end input mask and include a JavaScript., _(*4)

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.), _(*5)

This code snippet will replace the HTML node .mod_my_module when clicking on a.reloadThisElementOnClick., _(*6)

Ajax Calendar

Add this to the cal_default.html5 template. Don't forget to activate ajax reload on the module., _(*7)

<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., _(*8)

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., _(*9)

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., _(*10)

Demonstration

When the login was successful, the redirect processed in the login form will be followed., _(*11)

, _(*12)

Modal editing

This one is a bit more advanced., _(*13)

First of all, this is the list of requirements for this plugin:, _(*14)

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:, _(*15)

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»)., _(*16)

Demonstration

, _(*17)