Question

我有2个div用于从ajax请求加载数据，另一个用于显示带有gif图像的Jquery对话框，表示加载。

当ajax函数从控制器获取数据时，在请求页面时显示jquery对话框。我希望在ajax函数完成请求时关闭对话框，但不确定是否可以执行此操作。

这是代码

页

<style>
.ui-dialog-titlebar-close{
    display: none;
}
</style>
<script type="text/javascript">

    $(document).ready(function() {

        //define config object
        var dialogOpts = {
            title:"Retreving Donation Details",
            modal: true,
            autoOpen: true,
            height: 200,
            width: 250,
            closeOnEscape: false,
            resizable: false,

        };
        $("#ajaxload").dialog(dialogOpts);    //end dialog

        $("#ajaxload").dialog("open");  

    });



</script>
//jquery dialog
<div id = "ajaxload" style ="display:none; background-color:Green; text-align:center;">
 <br /> 
   <img alt="loader" src = "../../Content/loader.gif" id = "loader" height="100" width        ="100" style = "margin:auto; text-align:center; vertical-align:middle;" />
</div> 

//Div to load data
<div id="dataload"><div>

提前致谢

Answer 1

当ajax请求停止使用ajaxStop event时，您可以关闭它，如下所示：

$(document).ajaxStop(function() {
  $("#ajaxload").dialog("close");
});

当所有并发jQuery AJAX请求完成时，此事件将触发，然后您可以隐藏对话框。另一种（相同的效果）格式是直接绑定事件，如下所示：

$("#ajaxload").ajaxStop(function() {
  $(this).dialog("close");
});

显示jquery对话框，直到加载数据

1 个答案: