CODEWITHSUNDEEP
javascript
user1814979
user1814979

Reputation: 33

Jquery function used twice

I have this code here which gives a progress bar for check boxes. I want to use multiple such progress bars in single page. How do I recall the function uniquely for each div?

$(window).load(function(){
$(function() {
    $("#remind").progressbar({
        value: 0,
        max: 100,
        textFormat: 'fraction',
        complete: function(event, ui) {
            alert("Job complete you lazy bum!");
        }
    });

    $('.option').on('change', function() {
        var total = 0;

        $('.option:checked').each(function() {
            total += parseInt($(this).val());
        });

        $("#remind").progressbar("value", total);
    });

});
});

This is the html part,

<div id="remind"></div>  
<div>
    <input type="checkbox" class="option" value="25"> Task 1<br>
    <input type="checkbox" class="option" value="25"> Task 2<br>
    <input type="checkbox" class="option" value="25"> Task 3<br>
    <input type="checkbox" class="option" value="25"> Task 4<br>
</div>

How do I have another div of same functionality work without interfering the other and yet without writing all the js with changed class and id names.

Upvotes: 3

Views: 192

Answers (2)

p1100i
p1100i

Reputation: 3740

Well if the div holding the options ALWAYS follow the progressbar div you could use this connection in your script, ( line beginning with: + should be used instead of line with: - )

instead of id use class "remind":

+<div class="remind"></div> 
-<div id="remind"></div>

initialize progressbar by class instead of id:

+$(".remind").progressbar({
-$("#remind").progressbar({

use a localized search for the other checked options inside of the parent (div):

+$(this).parent().find('.option:checked').each(function() {
-$('.option:checked').each(function() {

and finally use the HTML structure to increase progress with prev div option:
*here plays the first sentence of my answer his role

+$(this).parent().prev('div.remind').progressbar("value", total);
-$("#remind").progressbar("value", total);

And welcome to stackoverflow! [:

Here is a jsFiddle to see it work.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

You must either wrap them in a container and use it to relate them, or better to give the input elements a data- attribute that relates them to their progress bar.

html

<div id="remind" class="progress-bar"></div>  
<div>
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 1<br>
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 2<br>
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 3<br>
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 4<br>
</div>
<div id="forget" class="progress-bar"></div>  
<div>
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 1<br>
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 2<br>
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 3<br>
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 4<br>
</div>

jquery

$(".progress-bar").progressbar({
    value: 0,
    max: 100,
    textFormat: 'fraction',
    complete: function(event, ui) {
        alert("Job complete you lazy bum!");
    }
});

$('.option').on('change', function() {
    var total = 0,
        progressbarID = $(this).data('progress');

    $('input[data-progress="'+progressbarID+'"].option:checked').each(function() {
        total += parseInt($(this).val());
    });

    $('#'+progressbarID).progressbar("value", total);
});

Demo at http://jsfiddle.net/kksXU/

Upvotes: 1

Related Questions