How to use a JQuery progress bar with dynamically assigned input IDs?

Question

Part of a table created in an MVC View:

Some of the HTML behind it:

...
<tr>
    <td>
        <div id="implG13">252,849.00</div>
    </td>
    <td>
        <div id="progressBarG13"></div></td>
    <td>
        <div id="unimplG13">234,687.00</div>
    </td>
</tr>

<tr>
    <td>
        <div id="implG19">239,773.00</div>
    </td>
    <td>
        <div id="progressBarG19"></div></td>
    <td>
        <div id="unimplG19">174,397.00</div>
    </td>
</tr>
...

I want to be able to display a Progress Bar on each row of the table, between these two columns, that graphically represents the percentage of 'cost savings' that have been implemented.

i.e. for the first row the JQuery might be something like:

function CalculatePercentage(){
    return ($("#implG13").val() / ($("#implG13").val() + $("#unimplG13").val()));
}

$("#progressbarG13").progressbar({
    $value : CalculatePercentage()
});

The problem is that the Table has a variable number of rows. I can programmatically assign unique IDs to reference the 'implemented cost saving value', the 'unimplemented cost saving value' and the progress bar on each row.

How can I implement this in JQuery so that I don't have to create a new function that explicitly references these IDs, kind of like named parameters in C#?

This is my first time programming in JQuery(is JQuery a javascript library or something?) so excuse my naivety please!

You can deal with classes instead of ids, and iterate on all your tr — mguimard
– mguimard, Commented Jul 29, 2013 at 14:57
@mguimard could you elaborate? How would I then set different values for each progress bar on each row? — Jimmy
– Jimmy, Commented Jul 29, 2013 at 15:03

mguimard · Accepted Answer · 2013-07-29 15:07:45Z

1

Something like that

HTML Markup

<tr>
    <td>
        <div class="impl" id="implG13">252,849.00</div>
    </td>
    <td>
        <div class="bar" id="progressBarG13"></div>
    </td>
    <td>
        <div class="unimpl" id="unimplG13">234,687.00</div>
    </td>
</tr>

Javascript (With jquery)

$("tr").each(function(){
    var $tr = $(this);
    var impl = $tr.find(".impl").val();
    var unimpl = $tr.find(".unimpl").val();
    $tr.find(".bar").progressbar({
        $value : impl/(impl+unimpl)
    });
});

answered Jul 29, 2013 at 15:07

mguimard

1,89913 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jimmy Over a year ago

hmmm thanks for the answer but it doesn't seem to be working, I just get lots of progress bars that look like they've all got a val of 1 or something (I've put test data in that should return 99%)

Jimmy Over a year ago

thought I'd got it, the value formula should be ((impl / (impl + unimpl)) * 100) but this still doesn't seem to work

Jimmy Over a year ago

$tr.find(".impl").val(); returns an empty string every time, it's not picking up the value

Jimmy Over a year ago

Thanks again, can you see what's wrong here? !example

mguimard Over a year ago

Seems to be the format of your data (Floats with comma). Use parseFloat( impl.replace(/,/g,'') ); and parseFloat( unimpl.replace(/,/g,'') );

|

Ambroos · Accepted Answer · 2013-07-29 15:07:33Z

0

You can use some more complex selectors in jQuery, for example the starts with selector.

$('[id^="progressbar"]').each(function() {
    var currentId = $(this).attr('id');
    var index = currentId.replace("progressbar",""); // This removes progressbar from the ID so you get the unique identifier
    var percentage = calculatePercentage(index);
    // Do something with percentage to display it somewhere.
});

function calculatePercentage(index) {
     return ($("#impl"+index).val() / ($("#impl"+index).val() + $("#unimpl"+index).val()));
}

You could take a look at Bootstrap Progress Bars to find some that are relatively easy to implement.

Good luck!

answered Jul 29, 2013 at 15:07

Ambroos

3,46622 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to use a JQuery progress bar with dynamically assigned input IDs?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related