JQuery

Question

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

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

在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 文件中没有代码，而是我正在查看的所有页面都嵌套在主索引中，这就是为什么索引只有来自多于。我相信这是一个关于范围或类似的问题，因为所有这些页面的基本结构都依赖于索引（包括弹出加载屏幕），但由于某种原因，这并没有发生，suggestions/answers？

Answer 1

我发现了问题，只需要确保我调用函数在每个需要它的地方显示加载对话框。我花了很长时间才得到的简单解决方案。

所以我会放置：

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

...任何有 forms/tables 需要时间来填充值的地方，即在从数据库中获取信息的函数之前，通常将其放置在同一个函数之后：

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

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

JQuery - 每次选择项目时都显示加载对话框（需要时）

JQuery - Have Loading Dialog Appear Every Time an Item is Selected (When Needed)

html

javascript

loading