Can't assign actual value to jQuery UI Progress bar

Question

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.

Answer 1

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.

Answer 2

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");