README

AjaxReloadElement 允许您通过ajax请求获取特定的前端模块或内容元素。

向下滚动查看一些令人愉快的动画截图 😎

使用方法

您需要在后端输入掩码中为模块/元素勾选“允许ajax重载”并包含JavaScript。

基本/自定义使用

如果您使用jQuery，可以使用类似以下代码。根据您的需求修改此代码片段。（创建一个 j_myajaxreload.html5 模板并将其包含在布局中。）

此代码片段将在点击 a.reloadThisElementOnClick 时替换HTML节点 .mod_my_module。

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

将此添加到 cal_default.html5 模板中。别忘了在模块上激活ajax重载。

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

这个是现成的。

对于所有集成了表单的模块，您可以在“通过ajax更新表单”框中勾选。此外，必须在页面布局中包含模板 "j_ajaxforms"。表单将自行更新，而不是重新加载整个页面。

此功能支持所有Contao核心表单，如 更改密码、个人信息、登录表单 等，以及以Contao风格编写的第三方应用程序中的表单。

演示

登录成功后，将跟随登录表单中处理的跳转过程。

模态编辑

这个功能稍微复杂一些。

首先，这是此插件的要求列表

1. jquery-ui.js（至少包含 Dialog 小部件）
2. jquery.dialogOptions.js（如果调整脚本，则可选）
3. jQuery.modal-editing.js（为此扩展编写的jQuery插件）

然后我们创建一个名为 j_modal_editing.js 的模板并将其包含在页面布局中

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

此代码片段是为MetaModel前端编辑量身定制的。您将编辑表单的id设置为 element 选项。此外，您需要按照上述说明启用ajax表单（见“Ajax表单”段落）。

演示