问题描述:

I want to display a second overlay on top of a UI Dialog while processing some data when a user is clicking a "create" button.

It is working on FF, but no Chrome or IE, when i am in the debugger I can see the overlay running, but when i am not i cant see it even if the process take about 10 sec to be finished.

Here is the CSS i use :

#myoverlay {

position: fixed;

z-index: 99999;

top: 0;

left: 0;

height: 100%;

width: 100%;

position: absolute;

background: rgba( 255, 255, 255, .8 ) url('images/ajax-loader.gif') 50% 50% no-repeat;

}

#myoverlay.ajaxloader { display: block; }

#myoverlay.hidden { display: none; }

The dialog is calling :

buttons: {

"Create": function (event){

var users = new Array();

$('form[id*="add_guest_form"]').each(function(){

var name = $(this).attr('id');

var id = name.replace(/(add_guest_form)([0-9]+)/,'\$2');

$data = {

//somedata set in the object

};

users.push($data);

});

console.log($('#myoverlay'));

$('#myoverlay').removeClass('hidden');

$('#myoverlay').addClass('ajaxloader');

console.log($('#myoverlay'));

console.log("In dialog.");

add2Group($('#group_name').val(),$('#group_note').val(),users),

$(this).dialog("close");

}

and the function add2group is doing

function add2Group(name,note,users) {

var i = 0;

function iteration(group_id){

console.log("add2group: start guest " + i);

var uid = -1;

//this function is not async

getSelectDataFromAjax(svgEditor.path() + "/guests_create.php",

users[i],

function (response) {

if (response['gid']>0){

console.log("add2Group: Success.");

uid = response['gid'];

} else {

console.log("add2Group: Failed.");

$.alert("The guest is already registered or an error occured.");

}

}

);

if (uid > -1) {

assignGroup2Guest(uid, group_id); //this function is doing ajax call, not async

console.log("add2group: stop guest " + i);

}

i++;

if (users.length - i <= 1) {

$('#myoverlay').removeClass("ajaxloader");

$('#myoverlay').addClass("hidden");

console.log("assignGroup2Guest: Last.");

console.log($('#myoverlay'));

$('#guests_list_grid').jqGrid().trigger("reloadGrid",[{current:true}]);

} else {

setTimeout(iteration(group_id), 10); // Wait 10 ms to let the UI update.

}

}

console.log("In add2group.");

var gid = createGroup(name,note);

if (gid > -1) {

iteration(gid);

}

console.log("Out add2group.");

};

I tried many other ways (use events binding doesnt work too), we looked at the problem with other developers but unable to find out a clue.

The only way we could see the overlay was to add the loooong loop in the add2group function and remove the ajax calls.

Any idea would be welcome.

Thanks a lot in advance.

网友答案:

Actually I found the answer to my question.

What I wanted to achieve is to of course display the overlay during the execution of the ajax calls.

However I had multiple ajax calls in my function assignGroup2Guest, and I had to wait until all of them were completed before going to the next part of the code.

2 points were wrong :

  • the async option is deprecated, and was not handled by IE or Chrome when it is actually ok for FF.
  • use of the completed for the callback instead of success.

then to make sure all ajax calls were correctly completed I used

$.when(ajax_func1(),ajax_func2()).done(function(aj1,aj2){
//do my final modifications here and release the overlay.
})

Hope this will help somebody.

网友答案:

You want the UI to update (show the overlay), and it is not doing that in time before the intensive functions you're running to create users.

Put the create/add in a timeout:

//This will make the overlay show until the timeout runs
setTimeout(
    function() {
         add2Group($('#group_name').val(),$('#group_note').val(),users),
         $(this).dialog("close");
    },
    1500
);
相关阅读:
Top