"Loading" 允许在后台加载 JS 和填充表单的函数

Question

我正在使用营销自动化平台 (Eloqua)，该平台使用 cookie 来跟踪我们网站（或我们 "microsite" 在其网站上）的用户。

在我的客户设置邮件首选项的页面上，他们有一个 javascript "Web Data Lookup" 我可以用来获取用户 cookie，然后从他们在数据库中的配置文件中提取数据。然后我使用自己添加的 javascript 来填充表单，并根据他们的数据显示和隐藏某些部分。

问题是 Web 数据查找速度非常慢（尤其是在连接速度较慢的情况下），而且我收到了一些提交的表单，其中缺少数据，因为脚本没有时间正确填充。

我想添加一些 JavaScript 或 jQuery 以在所有数据加载、表格填充、部分 hide/unhide 在后台。

知道从哪里开始吗？

Answer 1

有几种不同的方法可以禁止多次提交。一种是在第一次提交后立即在页面上覆盖一个半透明层，然后在服务器请求后将其移除 returns。然后，您可以向此页面添加一种 "loading" 动画（动画 gif 最简单，但进度条是另一个但要复杂得多的选项）。这将防止进一步发生基于 "click" 的事件。如果页面有热键助记符，记得禁用。

为此，请在页面底部创建一个空 div：

    <div id="waitOverlay"></div>

您可以在此处插入gif，也可以使用css设置。

在css中：

    #waitOverlay{
        display:none;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 500;
    }

在提交表单时，在 ajax 之前（或者您正在与服务器通信）运行

    $('#waitOverlay').show();

然后，服务器returns之后，运行

    $('#waitOverlay').hide();

这与创建灯箱非常相似。

Answer 2

当页面加载时，您可以禁用提交按钮。这仍然允许用户开始向表单中输入数据，但会阻止他们在页面加载完成之前提交。

$('.button-class').prop("disabled", true);
$('.button-class').prop("value", "Loading...");

然后，如果您在所有后台数据加载完成后有某种回调，请调用

$('.button-class').prop("disabled", false);
$('.button-class').prop("value", "Submit");

"Loading" 允许在后台加载 JS 和填充表单的函数

"Loading" function to allow JS to load and forms to populate in the background

javascript

jquery

eloqua