Question

所以问题是我有一个加载对话框，当软刷新时（信息得到更新/更改但页面没有刷新）有时不会执行。大多数情况下，它在具有表单和表格的页面上显得很好，但并非总是如此

这些表格特别显示了很多信息，具体取决于从下拉菜单中选择的项目。我注意到的是，当点击新页面或刷新当前页面时，加载对话框会显示，但是由于我们的网站没有针对每个页面/应用程序（boo）的唯一URL，所以＆＃39;如果你想在下拉列表中单击其他内容时遇到麻烦，但是必须等待所有内容加载而没有任何消息告诉你它正在加载。当涉及到表单和表格时，用户可以更改或添加内容，并使加载机制专注于对话框，并防止他们在加载（目标）之前做任何事情。

在HTML中：

<div id="dialog" title="Loading..." style="display:none">
    <br />
    <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        </div>
    </div>
</div>

在Javascript脚本标签中：

$(document).ajaxSend(function (event, request, settings) {
        $('#dialog').dialog('open');
    });

    $(document).ajaxComplete(function (event, request, settings) {
        $('#dialog').dialog('close');
    });

    $(document).ready(function () {
        //$('.ng-isolate-scope>ul').addClass('col-md-2')
        //$('.tab-pane').addClass('col-md-10')

        $('#dialog').dialog({
            autoOpen: false,
            show: "fade",
            hide: "fade",
            modal: true,
            resizable: false,
            draggable: false,
            buttons: [
            ],
            open: function (event, ui) {
                //$('.ui-widget-overlay').addClass('custom-overlay');
                $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
            },
            close: function () {

            }
        });

    });

这究竟是什么问题？我得到了不一致的结果（有时它会显示加载，有时它不会显示加载）。我觉得它与URL和页面导航有关。

我已尝试评论最后一个功能的位，只留下前两个功能。 Javascript在索引（其中一个视图的主页面）中起作用，但在视图中的其他位置不起作用。

修改

我明白问题是什么，但我仍然感到困惑。所以我使用的是MVC框架，最初我想将上面的代码片段复制到需要加载对话框的页面中。我认为这不会很好。该网站部分中唯一一个加载良好的页面并没有将代码放在自己的HTML文件中，而是我查看的所有页面都嵌套在主索引中，这就是为什么只有索引有上面的代码。我相信这涉及范围或类似的问题，因为所有这些页面都依赖于索引的基本结构（包括弹出加载屏幕），但由于某种原因，这不会发生，任何建议/答案？

Answer 1

我想出了问题，只需要确保我调用该函数在每个需要它的地方显示加载对话框。简单的解决方案让我永远得到。

所以我会放置：

$(document).ajaxSend(function (event, request, settings) {
    $('#dialog').dialog('open');
});

...任何需要时间来填充值的表单/表格的地方，即在从数据库中获取信息的函数之前，并将其放置在相同的函数之后：

$(document).ajaxComplete(function (event, request, settings) {
    $('#dialog').dialog('close');
});

就是这样。所有应用程序都从索引页面获取了主要结构，因此我不需要将所有样式和HTML复制并粘贴到每个页面中。

JQuery - 每次选择项目时都会出现加载对话框（需要时）

1 个答案: