Jquery : Ajax : How can I show loading dialog before start and close after close?

Question

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

//--

NEW CODE

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

LAST NEW CODE

//--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();

}

RETURNED :

TypeError: dlg is undefined

dlg.dialog("hide");

digitalextremist · Answer 1 · 2014-01-07T09:46:02.353

3

Since $.ajax() is asynchronous, you don't need to use a special function for 'before send' ... using your example, just do it before calling $.ajax() like this:

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

( What is asynchronous IO? http://en.wikipedia.org/wiki/Asynchronous_I/O )

Note!

In your example you create and store the dialog in dlg, but then you return dialog which is one problem. Using your code, it ought to be this:

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

After your 'new code' I add this advice:

Create the dialog outside the function, in the global namespace, like this:

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

Then return nothing, just setup your loading dialog with the function which modifies a global variable outside the namespace of the function.

Note: http://api.jqueryui.com/dialog/#option-hide It is .dialog('option','hide') not .dialog('hide')

edited Jan 07 '14 at 09:46

answered Jan 07 '14 at 09:13

digitalextremist

5,952
3
43
62

Error: no such method 'hide' for dialog widget instance (((( – Suleiman Jan 07 '14 at 09:19
What libraries are you using to create your dialog? – digitalextremist Jan 07 '14 at 09:21
I see your problem, you need to return `dlg` – digitalextremist Jan 07 '14 at 09:22
TypeError: dlg is undefined dlg.dialog("hide"); – Suleiman Jan 07 '14 at 09:33
`var dlg` needs to be before everything else. – digitalextremist Jan 07 '14 at 09:43
It needs to be OUTSIDE the `.click` event. – digitalextremist Jan 07 '14 at 09:45
THEN - Error: no such method 'hide' for dialog widget instance – Suleiman Jan 07 '14 at 09:46
Did you try `close()` instead? – digitalextremist Jan 07 '14 at 12:06
yes, but i found another solve. you can to look - http://amour05.ru (don't spam!) – Suleiman Jan 07 '14 at 13:46

score 0 · Answer 2 · answered Jan 07 '14 at 09:22

I would try

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

score 0 · Accepted Answer · answered Jan 07 '14 at 10:30

Working )))

$(".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 : How can I show loading dialog before start and close after close?

3 Answers3

Linked