JQuery UI对话框显示等待消息，直到处理了ajax调用 [英] JQuery UI dialog showing waiting message until ajax call is processed

问题描述

我认为所有的都在标题。当我开始这个时候，我认为这将是一个5分钟代码或一个快速的结果，当谷歌...但现在是三个小时，我在这：

I think that all is in the title. When I started this I thought it will be a 5 minutes codes or a quick result when googling... But It's now three hours I'm on this:

一个对话框，带有请稍候...消息，而我正在执行ajax调用以检索一些json结果，然后显示结果完成。

Just show a dialog, with a "Please Wait..." message, while I'm performing an ajax call to retrieve some json result, and then show a "Result complete".

$('#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
}

推荐答案

你不应该再使用 live 。请改用 .on 。你正在混淆对话框ajax代码。这里是我将如何做的例子。

You should not use live anymore. Use .on instead. You are mixing up the dialog an ajax code. Here is an example of how I would do it.

这里是小提琴的链接对于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);
        }
    });
} 

这篇关于JQuery UI对话框显示等待消息，直到处理了ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！