$.messager.progress and ajax

[Juan Antonio Martínez]

Hello.
I think this is a classic problem, but don't know the right way to solve

Need to show a progressbar and hide it when an ajax call gets done (either success or fail).
In some scenarios ajax call finishes _before_ progressbar is shown, thus the progress bar never closes.
Whats the right way to write this code?

Code:

function doSomeThingWithAjax() {
    $.messager.progress({height:75, text:'Working'});
    $.ajax({
        type: 'GET',
        url: myUrl,
        data: { ...        },
        dataType: 'json',
        success: function (result) { .... },
        error: function() {....},
        complete: function() {
              $.messager.progress('close');
        }
    });
}

Thanks in advance
Juan Antonio

[stworthy]

Display the message dialog in 'beforeSend' and close it in 'complete'. Please refer to the code below:

Code:

$.ajax({
	url: 'get_users.php',
	method: 'post',
	beforeSend:function(){
		$.messager.progress({height:75, text:'Working'});
	},
	complete: function(){
		$.messager.progress('close');
	}
})

[Juan Antonio Martínez]

Mmmmh doesn't work for me :-(. The problem is that $.messager.progress fires up an async task (timer) to handle its internals

Also, I use a global beforeSend options for every ajax calls to insert special headers, so no easy way of insert specific messages into each progress bar and/or omit them on ajax calls that doesn't need progressbar

This seems to work fine:

Code:

function doSomeThingWithAjax() {
    $.when( function() {
        $.messager.progress({height:75, text:'Working'}); 
    })
    .then( function() {
        $.ajax({
            type: 'GET',
            url: myUrl,
            data: { ...        },
            dataType: 'json',
            success: function (result) { .... },
            error: function() {....},
       });
    })
    .then( function() {
              $.messager.progress('close');
   });
}