jQuery:Ajax:如何在启动之前显示加载对话框，并在关闭之后关闭? [英] Jquery : Ajax : How can I show loading dialog before start and close after close?

问题描述

我想在处理AJAX请求时显示一个加载对话框； 而且我想在我的项目中的任何地方使用那段代码.

I want to show a loading dialog while an AJAX request is in process; and I want to use that piece of code anywhere in my project.

//--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;
}

//--

返回-错误:对话框小部件实例没有这样的隐藏"方法

returned - Error: no such method 'hide' for dialog widget instance

最新密码

//--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未定义

TypeError: dlg is undefined

dlg.dialog("hide");

dlg.dialog("hide");

推荐答案

正在工作)))

$(".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");
}

//-

这篇关于jQuery:Ajax:如何在启动之前显示加载对话框，并在关闭之后关闭?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！