Uncaught Error:

[ans66]

Buon giorno a tutti e Buon Anno!

Non riesco ad eliminare il seguente errore "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' " quando avvio la mia Dialog con ProgressBar (codice che segue):

jQuery(document).ready(function($){

$('body').append("<div id='myDialog'><div id='myProgressBar'></div></div><button id='downloadButton' style='visibility: hidden'></button>");
var myD="";

//$("#downloadButton").click(function(){
myD= MyDlgProgressBar();
myD.dialog("open");

//});

function MyDlgProgressBar ( ){

 var p=0;
 var myDlg= $("#myDialog").dialog({
        height: 100,
        width:500,
        modal: true,
        closeOnEscape: false,
        draggable: false,
        resizable: false,
        autoOpen:true,
        position: {
                    my: "center",
                    at: "center",
                    of: $("body"),
                    within: $("body")
                        } ,
        open: function(event, ui) { DoProgressBar();   } ,
        close: function (event, ui) {
            $("#myDialog").dialog('close');
        }
    }).prev(".ui-dialog-titlebar").css("background","#D0D0D0");
    
   function DoProgressBar() {
    $("#myProgressBar").progressbar({value:0.1});
    var timer=setInterval(function(){
            
            $("#myProgressBar .ui-progressbar-value").animate({width: p+"%"}, 500);
          
                      
            if(p>100){
                $("#myProgressBar .ui-progressbar-value").animate({width: "100%"}, 500);
                
                clearInterval(timer);
                $("#myProgressBar").progressbar( "value", false );
                if ($("#myDialog").dialog('isOpen') === true) {$("#myDialog").dialog("close"); }
            } else { if ($("#myDialog").dialog('isOpen') === true) { $("#myDialog").dialog( "option" , "title" ,"Percentuale: "+p+"%"); } }
            
            p = p +1;
    },500);
 
  }

return myDlg;
    
}
 
});

Grazie per l'aiuto

 

[ans66]

Ho risolto con seguente modifiche:

jQuery(document).ready(function($){

var myDlg="";
$('body').append("<div id='myDialog'><div id='myProgressBar'></div></div><button id='downloadButton' style='visibility: hidden'></button>");

 
    myDlg= $("#myDialog").dialog({
        height: 100,
        width:500,
        modal: true,
        closeOnEscape: false,
        draggable: false,
        resizable: false,
        autoOpen:false,
        position: {
                    my: "center",
                    at: "center",
                    of: $("body"),
                    within: $("body")
                        } ,
        open: function(event, ui) { DoProgressBar();  } ,
        close: function (event, ui) {
            $(this).dialog('close');
        }
    }).prev(".ui-dialog-titlebar").css("background","#D0D0D0");
 
    
   function DoProgressBar() {
    $("#myProgressBar").progressbar({value:0.1});
    var p=0;
    var timer=setInterval(function(){
            
            $("#myProgressBar .ui-progressbar-value").animate({width: p+"%"}, 500);
            p = p +1;
                      
            if(p>100){
                $("#myProgressBar .ui-progressbar-value").animate({width: "100%"}, 500);
                
                clearInterval(timer);
                $("#myProgressBar").progressbar( "value", false );
                if ($("#myDialog").dialog('isOpen') === true) {$("#myDialog").dialog("close"); }
            } else { if ($("#myDialog").dialog('isOpen') === true) { $("#myDialog").dialog( "option" , "title" ,"Percentuale: "+p+"%"); } }
            
            
    },500);
 
  }



$("#myDialog").dialog("open");



 
});