PHPackages                             richardhj/contao-ajax\_reload\_element - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. richardhj/contao-ajax\_reload\_element

ActiveContao-bundle[Utility & Helpers](/categories/utility)

richardhj/contao-ajax\_reload\_element
======================================

AjaxReloadElement for Contao OpenSource CMS

v2.1.15(3y ago)144.3k7[4 issues](https://github.com/richardhj/contao-ajax_reload_element/issues)[1 PRs](https://github.com/richardhj/contao-ajax_reload_element/pulls)LGPL-3.0-or-laterPHPPHP >=5.5

Since Jun 5Pushed 2y ago2 watchersCompare

[ Source](https://github.com/richardhj/contao-ajax_reload_element)[ Packagist](https://packagist.org/packages/richardhj/contao-ajax_reload_element)[ RSS](/packages/richardhj-contao-ajax-reload-element/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (10)Dependencies (4)Versions (30)Used By (0)

AjaxReloadElement for Contao Open Source CMS
============================================

[](#ajaxreloadelement-for-contao-open-source-cms)

[![Latest Version on Packagist](https://camo.githubusercontent.com/2525fa0fc02c8bdea08b7f8c962b1cd7d448d490218716056a690fff0110ff7f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f72696368617264686a2f636f6e74616f2d616a61785f72656c6f61645f656c656d656e742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/richardhj/contao-ajax_reload_element)![Software License](https://camo.githubusercontent.com/2bc95db9d4d6b319fe40fe1a46431a18f9684b30d516775115c5d0df6aa3e9b4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4c47504c2d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)

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
-----

[](#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

[](#basiccustom-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`.

```

    $(".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

[](#ajax-calendar)

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

```

    $(".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

[](#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

[](#demonstration)

When the login was successful, the redirect processed in the login form will be followed.

[![Demonstration with Contao's core login form](https://cloud.githubusercontent.com/assets/1284725/15799602/20d59fc8-2a62-11e6-8c22-2d1d971aeb20.gif)](https://cloud.githubusercontent.com/assets/1284725/15799602/20d59fc8-2a62-11e6-8c22-2d1d971aeb20.gif)

### Modal editing

[](#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:

```

    $(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):