woodlawn_la
woodlawn_la

Reputation: 15

Progress Bar | jQuery UI - JS UI

Currently:

  1. Click "Start Download" button
  2. "File Download" box displays
  3. Download starts
  4. Progress indicator begins and runs to 100%
  5. Box indicates "Complete"

I have been unsuccessful at modifying the code to do the following:

  1. Click "Start Download" button
  2. "File Download" box displays
  3. File 1 download begins
  4. Progress indicator states "file 1 downloading" then begins and runs to 100%
  5. File 2 download begins
  6. Progress indicator states "file 2 downloading" then begins and runs to 100%
  7. File 3 download begins
  8. Progress indicator states "file 3 downloading" then begins and runs to 100%
  9. Box indicates "Complete"

The code I am using is located at the following URL: https://jqueryui.com/progressbar/#download

  $(function() {
var progressTimer,
  progressbar = $( "#progressbar" ),
  progressLabel = $( ".progress-label" ),
  dialogButtons = [{
    text: "Cancel Download",
    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: "Start Download"
      });
    }
  }),
  downloadButton = $( "#downloadButton" )
    .button()
    .on( "click", function() {
      $( this ).button( "option", {
        disabled: true,
        label: "Downloading..."
      });
      dialog.dialog( "open" );
    });

progressbar.progressbar({
  value: false,
  change: function() {
    progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
  },
  complete: function() {
    progressLabel.text( "Complete!" );
    dialog.dialog( "option", "buttons", [{
      text: "Close",
      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( "Starting download..." );
  downloadButton.focus();
}

});

Upvotes: 0

Views: 237

Answers (0)

Related Questions