CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Jared
Jared

Reputation: 3892

Dynamically Creating bootstrap-sliders with jquery or javascript

I'm trying this with no success. For reference, the bootstrap slider is here : http://seiyria.github.io/bootstrap-slider/.

I'm not a javascript expert, either, so this might be very simple. The bootstrap-slider site has many examples of how to configure the sliders the way you want them. I'm going to have many sliders generated depending on how many objects are pulled from a JSON file or some other data storing method. It could be 2 or it could be 20.

I created a javascript function called createSlider that I've attempted to pass all of the information required at the bootstrap-slider site. I'm not getting any errors in my Chrome debugging area, but nothing is happening. All of the appropriate client-side sources are loading.

function createSlider (orgId) {
slidersList = document.getElementById('slidersList');
element = slidersList.createElement("div");
var sliderElement = element.createElement('input');

var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.setAttribute('id', charityId);
sliderElement.setAttribute('data-slider-id', sliderUnique);
sliderElement.setAttribute('type', 'text');
sliderElement.setAttribute('data-slider-min', '0');
sliderElement.setAttribute('data-slider-max', '100');
sliderElement.setAttribute('data-slider-step', '1');
sliderElement.setAttribute('data-slider-value', '50');

var span = element.createElement('span');
span.setAttribute('style', 'padding-left:5px;');
span.innerHTML =' ';

var innerSpan = span.createElement('span');
innerSpan.setAttribute('id', sliderUniqueVal);
innerSpan.innerHTML = '50';

sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
    innerSpan.innerHTML = text(slideEvt.value);
});

}

The slider() function is from the external site, and runs fine if I explicitly call it like the examples state to. Anyone know what's going wrong? Is there a better way to do this? Any ideas would be appreciated.

Upvotes: 1

Views: 1985

Answers (1)

mccannf
mccannf

Reputation: 16659

Note, in plain JavaScript, you can only use document.createElement and then append to another HTML element. You cannot call createElement directly against another HTML element.

I changed some of what you wrote from plain old JavaScript into JQuery, and now seems to work:

P.S. Didn't know where charityId came from, so just added it as another parameter into the function.

$(function() {
    createSlider('o1','c1');
    createSlider('o2','c2');
    createSlider('o3','c3');
});

function createSlider (orgId, charityId) {
    var slidersList = $('#slidersList');
    var element = $("<div></div>").appendTo(slidersList);
    var sliderElement = $("<input/>").appendTo(element);

    var sliderUnique= orgId.concat("Slider");
    var sliderUniqueVal = orgId.concat("SliderVal");
    sliderElement.attr('id', charityId);
    sliderElement.attr('data-slider-id', sliderUnique);
    sliderElement.attr('type', 'text');
    sliderElement.attr('data-slider-min', '0');
    sliderElement.attr('data-slider-max', '100');
    sliderElement.attr('data-slider-step', '1');
    sliderElement.attr('data-slider-value', '50');

    var span = $('<span></span>').appendTo(element);
    span.attr('style', 'padding-left:5px;');
    span.html(' ');

    var innerSpan = $('<span></span>').appendTo(span);
    innerSpan.attr('id', sliderUniqueVal);
    innerSpan.html('50');

    sliderElement.slider({tooltip: 'hide'});
    
    sliderElement.on("slide", function(slideEvt) {
           innerSpan.text(slideEvt.value);
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"  href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css">
<script type='text/javascript' src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<div id="slidersList"></div>

Upvotes: 2

Related Questions