CODEWITHSUNDEEP
jqueryjquery-ui
Edward
Edward

Reputation: 3081

Jquery multiple dynamic progress bars

I am a couple instances of Jquery UI progress bar widget on my page.

The problem I'm having is that it only loads the first value, and mimics each for each bar instead of cycling through all the bars on the page and getting unique values. can anyone explain why the each function is not looping through the values correctly?

Added a fiddle : http://jsfiddle.net/Uy9cA/25/

<div class="progress_bar" value="20"><div class="progress-label">Loading...</div></div> <div class="progress_bar" value="40"><div class="progress-label">Loading...</div></div>

Jquery

  $(function() {  
  $('.progress_bar').each(function() {
        var progressbar = $( ".progress_bar" ),
        progressLabel = $( ".progress-label" ),
        progressvalue = $(".progress_bar").attr('value');
        console.log(progressvalue);  

        progressbar.progressbar({
        value: false,
        change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "% Complete" );
        },
        complete: function() {
        progressLabel.text( "Complete!" );
       }
       });

      function progress() {        
      var val = progressbar.progressbar( "value" ) || 0;

       progressbar.progressbar( "value", val + 1 )
      .removeClass("beginning middle end")
      .addClass(val < 40 ? "beginning" : val < 80 ? "middle" : "end");

      if ( val < progressvalue ) 
      {
        setTimeout( progress, 100 );
       }
      }

    setTimeout( progress, 100 );
       });
    });

Upvotes: 2

Views: 7507

Answers (2)

Anujith
Anujith

Reputation: 9370

See this: Sample

Use:

  var progressbar = $(this),
    progressLabel = $(this).find( ".progress-label" ),
    progressvalue = $(this).attr('value');

instead of:

 var progressbar = $( ".progress_bar" ),
    progressLabel = $( ".progress-label" ),
    progressvalue = $(".progress_bar").attr('value');

For each .progress_bar class you have to get its own properties/children using $(this)

Upvotes: 5

Jayy
Jayy

Reputation: 14728

You've given them all the same class name. You need to have a way of referring to them independently. Give them different class names, or an additional class name or an id or something. For example:

<div class="progress_bar bar1" value ="80"><div class="progress-label barlabel1">Loading...</div></div>
<div class="progress_bar bar2" value="20"><div class="progress-label barlabel2">Loading...</div></div>
<div class="progress_bar bar3" value="40"><div class="progress-label barlabel3">Loading...</div></div>

Then adjust your code to deal with each individually.

Upvotes: 0

Related Questions