Jquery:Ajax:如何在开始之前显示加载对话框并在关闭之后关闭?

时间:2014-01-07 09:10:06

标签: jquery ajax

我想在AJAX请求正在进行时显示加载对话框; 我想在我的项目中的任何地方使用那段代码。

//--Add 
$("div.add_post a").click(function(){

    var dlg = loadingDialog({modal : true, minHeight : 80, show : true});

    $.ajax(
        {
            url : "/add.php",
            beforeSend : function (){
                dlg.dialog("show");
            },
            complete : function (){
                dlg.dialog("hide");
            }
        }
    );

    return false;
})


//--

//--Loading dialog

function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
    var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

    return dialog;
}

//--

新代码

//--Add 
$("div.add_post a").click(function(){

var dlg = loadingDialog();



$.ajax(
{

    url : "/add.php",
    complete : function (){
        dlg.dialog("hide");

    },
    success : function (data) {
        $(data).find("#add_post").dialog();
    } 
}
);

return false;
})


//--

//--Loading dialog

function loadingDialog(dOpts = {modal : true, minHeight : 80, show : true}, text = "пожалуйста подождите, идет загрузка...")
{
    var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

    return dlg;
}

//--

返回 - 错误:对于对话框小部件实例

,没有这样的方法'隐藏'

最新新闻

//--Add 
$("div.add_post a").click(function(){

var dlg;

loadingDialog();


$.ajax(
{

    url : "/add.php",
    complete : function (){
        dlg.dialog("hide");

    },
    success : function (data) {
        var form = $(data).find("#add_post");
        form.dialog({title : "Добавить признание", modal : true});

    } 
}
);

return false;
})


//--

//--Loading dialog

function loadingDialog(dOpts = {modal : true, minHeight : 80, show : true}, text = "пожалуйста подождите, идет загрузка...")
{
    dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

}

返回:

TypeError:dlg未定义

dlg.dialog( “隐藏”);

3 个答案:

答案 0 :(得分:3)

由于$.ajax()是异步的,你不需要为'发送前'使用特殊功能......使用你的例子,只需在调用$.ajax()之前这样做:

dlg.dialog("show");
$.ajax(
    {
        url: "/add.php",
        complete: function() {
            dlg.dialog("option", "hide");
        }
    }
);

(什么是异步IO?http://en.wikipedia.org/wiki/Asynchronous_I/O

注意!

在您的示例中,您在dlg中创建并存储对话框,但随后返回dialog这是一个问题。使用你的代码,它应该是这样的:

function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
    var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

    return dlg;
}

在您的“新代码”之后,我添加了以下建议:

在全局命名空间中创建函数外部的对话框,如下所示:

var dlg //de Put this OUTSIDE $("div.add_post a").click({})

function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
    dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();
}

loadingDialog({modal : true, minHeight : 80, show : true});

然后不返回任何内容,只需使用修改函数名称空间外的全局变量的函数设置加载对话框。

注意: http://api.jqueryui.com/dialog/#option-hide 它是.dialog('option','hide')而非.dialog('hide')

答案 1 :(得分:0)

我会尝试

$("div.add_post a").click(function(){

  var dlg = loadingDialog({modal : true, minHeight : 80, show : true});
            dlg.dialog("show");
  $.ajax({
        url : "/add.php",
        complete : function (){
            dlg.dialog("hide");
        }
     });
 return false;
});


//--Loading dialog

function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
    var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
    $(".ui-dialog-titlebar").hide();

    return dialog;
}

答案 2 :(得分:0)

工作)))

$(".wrapper").prepend('<div id="loading" class="i hide"><img src="/theme/style/imgs/busy.gif" alt="загрузка"> идет загрузка</div>');

//--Add 
$("div.add_post a").click(function(){


$.ajax(
{

    url : "/add.php",
    beforeSend : function () {
        loading();

    },
    complete : function (){

    },
    success : function (data) {
        loading("stop");
        var form = $(data).find("#add_post");
        form.dialog({title : "Добавить признание", modal : true});

    } 
}
);

return false;
})


//--

//--Loading dialog

function loading(type = "start")
{
    if(type == "start")
    {
        $("#loading").dialog({modal : true, minHeight: 30});
        $(".ui-dialog-titlebar").hide();
    }
    else
        $(".ui-dialog-content").dialog().dialog("close");
}

// -