jquery .post 或 ui 对话框是否有“请稍候......”图标选项？答案

【问题标题】：does jquery .post or ui dialog have a "please wait . ." icon option?jquery .post 或 ui 对话框是否有“请稍候......”图标选项？
【发布时间】：2009-11-30 02:33:04
【问题描述】：

当我点击一个链接时，我在一个 javascript 函数中有一个 jquery .post 调用。这将调用一个控制器操作，该操作将部分结果返回到 jquery ui 对话框中。

这个过程可能需要几秒钟，因为控制器会调用模型进行一些计算等。 .

无论如何，是否有显示“请稍候......”或从点击链接到显示对话框的动画图标？

【问题讨论】：

标签： jquery asp.net-mvc post dialog

【解决方案1】：

从ajaxload.info 获取一个 ajax 加载图像。将它放在页面上的隐藏 div 中，然后在 Ajax 发生时显示 div。 ajax 调用完成后再次隐藏。

【讨论】：

您不希望用户（总是）看到对话框，因为这会发送错误消息。最好是设置一个超时显示 2 秒后。
如何让这张图片出现在屏幕中间。我在屏幕上有一个很大的 html 表格，所以在顶部或底部显示它看起来很奇怪。 .
您可以使用一个 Center 插件，我在超时对话框中使用它。它在主要的 jQuery 网站上。
看看我用示例代码回答的另一个问题：stackoverflow.com/questions/1802734/html-php-progress-bar/…
griegs - 你知道是否有任何中心插件使背景变灰？？

【解决方案2】：

我通过创建一个 javascript 超时来实现这一点，然后显示一个请等待 div，当 jquery 返回时该 div 被隐藏。

我的 JS 看起来像;;

function ClearTimeoutError(timeoutId) {
    clearTimeout(timeoutId);
    if ($('.timeout').is(':visible')) { $('.timeout').fadeOut(100); };
}

这是我执行 jQuery 回发的方法。把所有非必要的代码都去掉了。

var timeoutId = setTimeout(function() { $('.timeout').center(); $('.timeout').fadeIn(250); }, 2000);

    $.ajax({
        type: "POST",
        .
        .
        .
        success: function(msg) {
            ClearTimeoutError(timeoutId);

您还可以通过创建另一个超时来变得更时髦

【讨论】：

【解决方案3】：

当使用 ASP.NET AJAX 库时，我可以通过向 PageRequestManager 注册一个 show 方法和一个 hide 方法来注册一个模态异步指示器。

例如，我会将以下代码放在我的母版页中

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="cc1" %>
...
<style>
.modalBackground {
    background-color: #efefef;
    filter: alpha(opacity=70);
    MozOpacity: 0.7;
    opacity: 0.7; 
}  
.updateProgress div {
    border-width: 1px;
    border-style: solid;     
    background-color: #ffffff;
    position: relative; 
    top: 30%; 
    text-align: center;
    padding: 5px 5px 5px 5px;
}
</style>
...
<asp:Panel ID="pnlUpdateProgress" runat="server" 
    CssClass="updateProgress" 
    style="display: none; height: 0;">
<div>
    <asp:Image ID="commentViewThrobber" runat="server" 
            ImageAlign="AbsMiddle" 
            AlternateText="Please Wait..." 
            ImageUrl="~/images/throbber-slow.gif" 
            EnableViewState="false" />
    Please wait...
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalProgress" runat="server"
    TargetControlID="pnlUpdateProgress" 
    BackgroundCssClass="modalBackground" 
    PopupControlID="pnlUpdateProgress" />

并将以下内容注册为启动脚本：

<script language='JavaScript' type='text/javascript'>

var ModalProgress ='<%= ModalProgress.ClientID %>'
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);    

function beginReq(sender, args) {
// shows the Popup     
$find(ModalProgress).show();        
}  

function endReq(sender, args) {
//  hides the Popup     
$find(ModalProgress).hide(); 
}

</script>

【讨论】：

看起来他们是从标签中定位 MVC，所以 webform 的东西在这里不适用。

【解决方案4】：

如果你想要一个全局的“jquery 正在做 ajax 的东西”处理程序，jQuery 有一些 global ajax events 可以听。它们是触发 Chris 所建议的东西的好地方。

编辑如果您正在寻找一种使屏幕变灰的好方法，我过去曾成功使用SimpleModal。不过不要忘记在您的选项中传递 close:false ，您可能不希望用户关闭您的 Please Wait 消息:-)

【讨论】：