jquery .post或ui对话框有“请稍等。。“图标选项？

https://stackoverflow.com/questions/1817602

08-07-2019
|

题

当我点击链接时，我在javascript函数中有一个jquery .post调用。这会调用一个控制器动作，它将partialresult返回到jquery ui对话框中。

当控制器调用模型进行某些计算等时，此过程可能需要几秒钟。

无论如何，无论如何都要显示“请等待。＆QUOT;点击链接后直到显示对话框的时间或动画图标？

解决方案

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

其他提示

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

我的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);

你可以通过创建另一个超时来获得更加流畅的效果，当它只是占用太长时间然后显示错误div或其他东西时会隐藏等待div。

使用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>

如果你想要一个全局的“jquery正在做ajax的东西”处理程序，jQuery有一些你可以听的全球ajax事件。它们是触发类似克里斯建议。

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

jquery .post或ui对话框有“请稍等。 。“图标选项？

jquery .post或ui对话框有“请稍等。。“图标选项？