JQuery UI对话框显示等待消息,直到处理ajax调用

时间:2013-04-04 16:30:58

标签: jquery jquery-ui callback

我认为一切都在标题中。当我开始这个时,我认为这将是一个5分钟的代码或谷歌搜索时的快速结果...但现在是三个小时我在这:

在我执行ajax调用以检索某些json结果时,只显示一个带有“Please Wait ...”消息的对话框,然后显示“结果完成”。

$('#switchOff').live("click",function(){

   $('#dialog').dialog({
                modal:true,

               open: function(){
// I would like to call myAjax function
//From here ?
// While my dialog is showing the Wait message...
               },


                complete: function(){
//close the dialog when fished
                 $('#dialog').dialog('close');
                         },
   }); 



});

function ajaxCall() {
                //my ajax call
}

2 个答案:

答案 0 :(得分:13)

您不应再使用live了。请改用.on。您正在混合对话框ajax代码。这是我将如何做的一个例子。

Here is link to fiddle for demonstation

$('#switchOff').on("click",  ajaxCall);

$("#loading").dialog({
    hide: 'slide',
    show: 'slide',
    autoOpen: false
});

function ajaxCall() {
    $.ajax({
        url: '/echo/html/',
        data: { html: '<p>JSON result</p>' , delay: 3},
        method: 'post',
        beforeSend: function(){
           $("#loading").dialog('open').html("<p>Please Wait...</p>");
        },
        success: function(data) {
            $('#loading').html("<p>Result Complete...</p>");
            $('#ajaxResult').html(data);
        }
    });
} 

答案 1 :(得分:0)

确定

发表此评论

  `As I described my problem, in fact I would like to first display the dialog: $("#myDialogBox").dialog();` 

And after call the ajax..

解决方案是:

点击按钮id="btn"

$( "#btn_Deletepara" ).click(function() {
                $( "#JQUERY'sDialog" ).dialog( "open" );
//Now you Call the ajax
            });

或者

$( "#JQUERY'sDialog" ).dialog({

Add your script for call ajax