progressbar die sich wiederholen soll mit jquery /ui

soyyo

Grünschnabel
hallo zusammen, und ein gesundes neues jahr.......
als allererstes bin ich hier nach der registrierung auf ein thread gestoßen der da sagt: man soll sich anfangs doch selbst bemühen, und nicht andere das aufgabenlösen überlassen. das finde ich ganz vernünftig.
nach stunden, nach vielen stunden muss ich aber kapitulieren und euch um hilfe bitten.
ich habe da ein script von der seite jquery ui für eine progressbar. nun wollte ich dass sich das script nach beendigung erneut wiederholt in dem ich das selbe script mit namen der ersten anonymen zugewiesen habe. zweck des ganzen ist dass die progressbar einmal als download dialog und dann installations dialog durchlaufen soll, wobei am ende des installations-durchlaufs über den button schliessen ein neues browser fenster aufgehen soll. es hackt aber glaube ich dort wo ich einnen kommentar geschrieben habe. hier das html mit script:

vielen dank für eure aufmerksamkeit
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Download Dialog</title>
<link rel="stylesheet" href="css/jquery-ui.theme.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/vendor/jquery-ui-1.11.4.min.js"></script>

<script>
$(function () {
    var progressTimer,
    progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" ),
    dialogButtons = [{
    text: "Download Abbrechen",
    click: closeDownload
 }],
    dialog = $( "#dialog" ).dialog({
    autoOpen: false,
    closeOnEscape: false,
    resizable: false,
    buttons: dialogButtons,
    open: function() {
     progressTimer = setTimeout( progress, 2000 );
   },
     beforeClose: function() {
     downloadButton.button( "option", {
     disabled: false,
     label: "Beginn Download"
    });
   }
 }),
    downloadButton = $( "#downloadButton" ).button().on( "click", function() {
   $( this ).button( "option", {
     disabled: true,
     label: "Download läuft..."
  });
     dialog.dialog( "open" );
  });
    progressbar.progressbar({
    value: false,
    change: function() {
    progressLabel.text( "Fortschritt: " + progressbar.progressbar( "value" ) + "%" );
   },
    complete: function() {
    progressLabel.text( "Download beendet!" );
    dialog.dialog( "option", "buttons", [{
    text: "Installieren",
    click: inst
 }]);
  $(".ui-dialog button").last().focus();
   }
  });
    function progress() {
     var val = progressbar.progressbar( "value" ) || 0;
     progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
     if ( val <= 99 ) {
     progressTimer = setTimeout( progress, 50 );
    }
   }

    function closeDownload() {
    clearTimeout( progressTimer );
    dialog.dialog( "option", "buttons", dialogButtons ).dialog( "close" );
    progressbar.progressbar( "value", false );
    progressLabel.text( "Beginne download..." );
    downloadButton.focus();
    }
/*-------------------------------------------------------------------------------------------------------------------------------------*/
  function inst() {
  var progressTimer,
  progressbar = $( "#progressbar" ),
  progressLabel = $( ".progress-label" ),
  dialogButtons = [{
  text: " Installation Abbrechen ",
  click: closeDownload
}],
  dialog = $( "#dialog" ).dialog({
// autoOpen: false, -------kann weg 
   closeOnEscape: false,
   resizable: false,
   buttons: dialogButtons,
   open: function() {
    progressTimer = setTimeout( progress, 2000 );
  },
/*  beforeClose: function() {
     downloadButton.button( "option", {
     disabled: false,
     label: "Beginn Download" <----------------muss irgendwohin zugewiesen werden
  });
 }*/
}),
   downloadButton = $( "#downloadButton" ).button().on( "click", function() {     //ab hier könnte der fehler  sein, denn ich komme ja
 $( this ).button( "option", {                                                //über den button on click bei cmomplet:      function() im 1.durchlauf
 disabled: false,                                                        //denn beim zweiten durchlauf ist downloadButton nicht notwendig
 change: "Installation läuft..."
});
  dialog.dialog( "open" );
});
  progressbar.progressbar({
  value: false,
  change: function() {
  progressLabel.text( "Fortschritt Installation: " + progressbar.progressbar( "value" ) + "%" );
 },
  complete: function() {
  progressLabel.text( "Installation beendet!" );
  dialog.dialog( "option", "buttons", [{
  text: "Schließen",
  click: closeDownload
}]);
$(".ui-dialog button").last().focus();
  }
});
  function progress() {
  var val = progressbar.progressbar( "value" ) || 0;
  progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
  if ( val <= 99 ) {
  progressTimer = setTimeout( progress, 50 );
 }
}

  function closeDownload() {
   clearTimeout( progressTimer );
   dialog.dialog( "option", "buttons", dialogButtons ).dialog( "close" );
   progressbar.progressbar( "value", false );
   progressLabel.text( "Beginn der Installation..." );
   downloadButton.focus();
  }
 }
});
</script>
<style>
  #progressbar {
    margin-top: 20px;
  }
  .progress-label {
   font-weight: bold;
   text-shadow: 1px 1px 0 #fff;
  }
  .ui-dialog-titlebar-close {
   display: none;
  }
</style>
</head>
<body>
<div id="dialog" title="Call'a'Cab App">
<div class="progress-label">Beginne Download...</div>
<div id="progressbar"></div>
</div>
<button id="downloadButton" class="instbutton">Start Download</button>
</body>
</html>
 
Zuletzt bearbeitet:
schau mal
Javascript:
$(function () {
    var progressTimer,
    progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" ),
    dialogButtons = [{
    text: "Download Abbrechen",
    click: closeDownload
}],
    dialog = $( "#dialog" ).dialog({
    autoOpen: false,
    closeOnEscape: false,
    resizable: false,
    buttons: dialogButtons,
    open: function() {
     progressTimer = setTimeout( progress, 2000 );
   },
     beforeClose: function() {
     downloadButton.button( "option", {
     disabled: false,
     label: "Beginn Download"
    });
   }
}),
    downloadButton = $( "#downloadButton" ).button().on( "click", function() {
   $( this ).button( "option", {
     disabled: true,
     label: "Download läuft..."
  });
     dialog.dialog( "open" );
  });
    progressbar.progressbar({
    value: false,
    change: function() {
    progressLabel.text( "Fortschritt: " + progressbar.progressbar( "value" ) + "%" );
   },
    complete: function() {
    progressLabel.text( "Download beendet!" );
    dialog.dialog( "option", "buttons", [{
    text: "Installieren",
    click: inst
}]);
  $(".ui-dialog button").last().focus();
   }
  });
    function progress() {
     var val = progressbar.progressbar( "value" ) || 0;
     progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
     if ( val <= 99 ) {
     progressTimer = setTimeout( progress, 50 );
    }
   }
    function closeDownload() {
    clearTimeout( progressTimer );
    dialog.dialog( "option", "buttons", dialogButtons ).dialog( "close" );
    progressbar.progressbar( "value", false );
    progressLabel.text( "Beginne download..." );
    downloadButton.focus();
    }
/*-------------------------------------------------------------------------------------------------------------------------------------*/
  function inst() {
  progressTimer = 0;
  dialogButtons = [{
  text: " Installation Abbrechen ",
  click: closeDownload
}];
dialog.dialog('destroy');
  dialog = $( "#dialog" ).dialog({
// autoOpen: false, -------kann weg
   closeOnEscape: false,
   resizable: false,
   buttons: dialogButtons,
   open: function() {
    progressTimer = setTimeout( progress, 2000 );
  },
/*  beforeClose: function() {
     downloadButton.button( "option", {
     disabled: false,
     label: "Beginn Download" <----------------muss irgendwohin zugewiesen werden
  });
}*/
});
  dialog.dialog( "open" );

  progressbar.progressbar({
  value: false,
  change: function() {
  progressLabel.text( "Fortschritt Installation: " + progressbar.progressbar( "value" ) + "%" );
},
  complete: function() {
  progressLabel.text( "Installation beendet!" );
  dialog.dialog( "option", "buttons", [{
  text: "Schließen",
  click: closeDownload
}]);
$(".ui-dialog button").last().focus();
  }
});


}
});
habe den code ein bischen gekuerzt, da functionen wiederholst und neue variablen deklariert hast was nicht benoetigt wird...

bei function inst()

musst du natuerlich das dialog zerstoeren...

dialog.dialog('destroy');

dann funkt es

gruss hyper
 
hallo aus Berlin,

vielen vielen Dank Hyper Lord daß du dich meiner Geschichte angenommen hast, und ich entschuldige mich wenn ich beim reinkopieren hier einen fehler gemacht habe. ich habe mir deine verkürzte Version genommen und in meine Übung reinkopiert. Sie gefällt mir weil sie ja deutlich kürzer ist. Das Problem war und ist aber geblieben. Und zwar: beim 2. ProgressTimer-Aufruf erscheint im Dialog Label der Text false% .
Schau mal bitte https://jsfiddle.net/soyyo/j3xq65s3/6/ (meine alte Version) hier wenn du mal zeit hast. Hier hab ich mal deine Version : http://jsfiddle.net/soyyo/j3y89n4t/ aber so wie es am Ende sein soll. Mit einem window open auf die Resource bei jquery-ui. Dabei wird die auffallen daß am Schluss 2 weitere Probleme auftauchen: 1. appbutton ist am ende leider nicht focus und das neue window nimmt keine Größenangaben an.

Aber trotzdem....vielen vielen herzlichen Dank. ach ja.....ich hab aus downloadButton für mich mal appbutton gemacht.
 
Zuletzt bearbeitet:
Zurück