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

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

本文关键字：后台 加载 表单 填充 JS Loading quot 函数      更新时间：2023-09-26

我正在使用一个营销自动化平台(Eloqua)，它使用cookie来跟踪我们网站上的用户(或他们网站上我们的"微型网站")。

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

问题是web数据查找相当慢(特别是在较慢的连接上)，我得到一些表单提交的数据缺失，因为脚本没有时间正确填充。

我想添加一些JavaScript或jQuery来放置一个"加载"或类似的消息，而所有的数据加载，表单填充，部分隐藏/取消隐藏在后台。

知道从哪里开始吗?

有几种不同的方法可以阻止多次提交。一种方法是在第一次提交时在页面上覆盖半透明层，然后在服务器请求返回时将其删除。然后你可以在这个页面上添加一种"加载"动画(gif动画是最简单的，但进度条是另一种更复杂的选择)。这将防止更多基于"点击"的事件发生。如果页面上有任何热键助记符，请记住禁用它们。

为此，在页面底部创建一个空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();

然后，在服务器返回后运行

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

这与创建一个灯箱非常相似

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

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

如果你有一些回调当所有的后台数据完成加载，调用

$('.button-class').prop("disabled", false);
$('.button-class').prop("value", "Submit");
相关文章：