CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-ui-progressbar
Ali Tabibzadeh
Ali Tabibzadeh

Reputation: 193

Can't assign actual value to jQuery UI Progress bar

I have an issue with jQuery UI Progress bars. I got multiple progress bars on my page (for stacked progress bars indicating a multi-step progress) and I have the following code to initiate the progress bar and assign the value : 

function createProgressBars(progressVal, progressValMax, callback) {

progressVal = $(this).data("progress-value");
progressValMax = $(this).data("progress-val-max");

$(".progress-bar").progressbar({
    value : progressVal,
    max : progressValMax
});

callback();}
jQuery(function($){
$(document).ready(function(){

    $(".progress-bar").each(function(){
        var pv = $(this).data("progress-value"),
            pm = $(this).data("progress-max");

        createProgressBars(pv, pm);
    });
});
});

EDIT : Added HTML Code

<div class="progress-bar regular-user" data-progress-value="1000" data-progress-max="3000"></div>

<div class="progress-bar bronze-user" data-progress-value="500" data-progress-max="2000"></div>

<div class="progress-bar silver-user" data-progress-value="300" data-progress-max="2000"></div>

<div class="progress-bar gold-user" data-progress-value="200" data-progress-max="3000"></div>

But in the HTML attributes I have aria-value-max=100 and aria-value-now=0 .

How can I specify those values correctly? I had the same experience with a progress bar (a single one actually) and it worked fine.

Thanks guys.

Upvotes: 2

Views: 602

Answers (2)

jaudette
jaudette

Reputation: 2313

The first thing you do in createPogressBar is to overwrite the two parameters with this that does not point to anything at that point. You could probably do:

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

    $(".progress-bar").each(function(){
        var pv = $(this).data("progress-value"),
            pm = $(this).data("progress-max");

       $(this).progressbar({
          value : pv,
          max : pm
       });
    });
});

Or move the code to your createProgressBar function by sending only the this parameter.

function createProgressBars(container, callback) {

progressVal = $(container).data("progress-value");
progressValMax = $(container).data("progress-val-max");

$(container).progressbar({
    value : progressVal,
    max : progressValMax
});

callback();}
jQuery(function($){
$(document).ready(function(){

    $(".progress-bar").each(function(){
        createProgressBars(this);
    });
});

EDIT: I updated both codes. In the first case, we need to use this to create the right progress bar, not the general selector.

In the second case, we need to use the container.

Not doing so tries to re-generate all progress bars every time, which caused weird effects.

Upvotes: 1

geert3
geert3

Reputation: 7321

you're setting pv and pm, passing this to the function, and then essentially recalculating those values inside the function. I think you should just get rid of these lines:

progressVal = $(this).data("progress-value");
progressValMax = $(this).data("progress-val-max");

Upvotes: 0

Related Questions