I added a progressbar when my app raise ajax application, this progress bar was prompted by a dialog, I write below code in ajaxStop function:
progressbarDialog.dialog("close");
progressbar.progressbar("close");
this.appendDOM.empty(); `
It works well when the first ajax happens, but from the second time, a dialog and progresss bar display un-normal, a blank part will show under the normal part, I think the dialog may be not deleted but hided, can anyone explain this issue? how can the dialog/progress bar total be deleted?
version 2:
progressbarDialog.dialog('destroy').remove();
do works, but my dialog is a modal dialog, when I raise application more and more time, the back-ground color will become more and more dark~~~~ below is my function, can anyone help me~
GSMProgressBar.prototype.showProgressBar = function(){
this.appendDOM.empty();
this.appendDOM.prepend("");
var progressbar = $( "#progressBarDialog #progressbar" );
var progressbarDialog = $("#progressBarDialog");
$(document).ajaxStart(function(){
var timeoutOption;
if(this.config='fast'){
timeoutOption = 300;
}else if(this.config='slow'){
timeoutOption = 800;
}else{
//default 250
timeoutOption = 500;
}
progressbar.progressbar({value:false});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
if ( val < 75 ) {
progressbar.progressbar( "value", val + Math.random() * 25 );
}
if(val<99){
setTimeout( progress, timeoutOption );
}
}
setTimeout( progress, 10 );
progressbarDialog.dialog({
modal: true,
height: 110,
width: 400
});
$(".ui-dialog-titlebar").hide();
});
$(document).ajaxStop(function(){
progressbarDialog.dialog('destroy').remove();
});
};