Cloned UI Slider element causes error when dynamically added

Question

I use the following script, to have multiple jQuery UI sliders with a combined total: Combined total for multiple jQuery-UI Sliders

Now I want to start with one slider on page load, and after a button click I want to add another slider that should be included in the calculation. But unfortunately with my approach, when I add a new slider, the first slider gets the value NaN and when I try to move it, I get the following error Uncaught TypeError: Cannot read property 'addClass' of undefined.

When I include multiple sliders from the beginning (via PHP), it works without problems.

Here is the html structure:

<div class="form-group taskType">
     <label for="TaskType32" class="col-sm-4 control-label">Aufgaben Art</label>
           <div class="col-sm-8">
              <select class="form-control" id="TaskType32" name="type[]">
                  <optgroup label="DESIGN">
                      <option value="photoshop">PHOTOSHOP</option>
                      <option value="recherche">RECHERCHE</option>
                   </optgroup>
             </select>
             <div class="rangeSliderContainer">
                 <div class="slider">100</div>
                 <span class="value">100</span>%
             </div>
             <input type="hidden" class="hiddenPercentage" name="percentage[]" value="100">
        </div>
</div>

Here is my approach:

1.) I clone the element first

clonedTaskAdd = $('.createfinishedTask .taskType').clone();

2.) Then I initialize the slider function

manageSliders();

function manageSliders() {
    var sliders = $(".rangeSliderContainer .slider");
    var availableTotal = 100;

    sliders.each(function() {
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,
            min: 0,
            max: availableTotal,
            range: "max",
            step: 2,
            animate: 0,
            slide: function(event, ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);
                $(this).parent().next('.hiddenPercentage').val(ui.value);

                // Get current total
                var total = 0;

                sliders.not(this).each(function() {
                    total += $(this).slider("option", "value");
                });

                // Need to do this because apparently jQ UI
                // does not update value until this event completes
                total += ui.value;

                var delta = availableTotal - total;

                // Update each slider
                sliders.not(this).each(function() {
                    var t = $(this),
                        value = t.slider("option", "value");

                    var new_value = value + (delta/2);

                    if (new_value < 0 || ui.value == 100)
                        new_value = 0;
                    if (new_value > 100)
                        new_value = 100;

                    t.siblings('.value').text(new_value);
                    t.slider('value', new_value);
                    t.parent().next('.hiddenPercentage').val(new_value);
                });
            }
        });
    });
}

3.) On the button click, I change the values of the clone and append it

$('.createfinishedTask').on('click', '.rangeTrigger', function(e) {
        e.preventDefault();
        addSlider();
    });


function addSlider() {
    clonedTaskAdd.find('.slider, .value').text('0');
    clonedTaskAdd.find('.hiddenPercentage').val('0');
    clonedTaskAdd.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clonedTaskAdd);
    manageSliders();
}

So the problem occurs after I call the last manageSliders(); inside the addSlider() function. But I don't know how to include the new added slider into the total calculation.

FIDDLE

Feel free to ask if you need more information. Thank you!

Answer 1

The problem is the code that initialises the sliders. You extract a text value from the existing slider, but the DOM has changed for that slider so you get a NAN value.

The main change I made was this: http://jsfiddle.net/TrueBlueAussie/p5ty5wbv/3/

    // This value comes from the text element, but only if not converted to a slider
    if ($this.find('.ui-slider-handle').length) {
        var init_value = $this.slider("option", "value");
    } else {
        var init_value = ~~$this.text();
    }

I also changed the cloning to use a clone of the clone so problems with reusing the element go away:

function addSlider() {
    var clone = clonedTaskAdd.clone();
    clone.find('.slider, .value').text('0');
    // clonedTaskAdd.find('.slider').text('0');
    clone.find('.hiddenPercentage').val('0');
    var rand = makeid();
    clone.find('label').attr('for', rand);
    clone.find('select').attr('id', rand);
    clone.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clone);
    // $('.createfinishedTask .taskType').last().find('.slider').slider();
    manageSliders();
}

other minor tweaks were where I started to add temp vars instead of re-jquerying elements and the use of ~~ instead of parseInt (faster and shorter integer truncation).