Create JQuery Mobile slider at runtime and set onchange listener

Question

in my app I receive data through websockets, depending on this data I want to append some sliders to my page content: . It is an array of objects I receive and for each object I want to create the corresponding slider with max, min, and the current value. Also I want an on change listener for each slider to send values back via websockets if the user changes the values.

I already stumbled upon this JQuery Mobile sliders inserted dynamically . But the solution doesn't seem appropriate because the elements should be created on runtime, and not when the page is loaded the first time. Moreover I don't know, how to set the onchange listeners in an elegant way.

Preferably I would like to use Jquery Mobile as I already use it for the other visual elements but if it is not possible I would be thankful for any other possibility.

Edit: And how can i refer to the index of the array within my onchange listener I tried ($(this).id()) but this throws: "TypeError undefined is not a function".

Thanks Peter.

For the index or ID, you need to include it in the slider somehow. One way is to use a data attribute (http://api.jquery.com/data/#data-html5). Here is an updated fiddle that stores and retrieves an id from a data attribute (you could just store the index instead): http://jsfiddle.net/ezanker/HuDb2/3/ — ezanker, Jul 09 '14 at 13:01
thx: but how can i retrieve the array element of the corresponding id? Is this the most efficient way for the data binding? I acutally switched from android-native where i was used to write an adapter for the ui binding. Is there an equivalent for javascript. — dan kutz, Jul 10 '14 at 14:16
There are libraries like knockout (http://knockoutjs.com/) for binding. For something this simple you can use the array index instead of id: http://jsfiddle.net/ezanker/HuDb2/13/. If you use ID, you would iterate the array until you find the matching object. — ezanker, Jul 10 '14 at 15:33

ezanker · Accepted Answer · 2014-07-08T23:20:05.313

You add the sliders much like in the example you referenced. Given a DIV with ID="dynamicSliders" and a button which will retrieve the array of sliders, on button click:

$("#btnAddSliders").on("click", function(){
    var mySliders = [
        { value: 20, min: 0, max: 100},
        { value: 30, min: 0, max: 100},
        { value: 50, min: 0, max: 100}        
    ];

    var html = '';
    for (var i=0; i < mySliders.length; i++){
        html += '<input class="dynSlider" type="range" name="slider"' + i + ' id="slider"' + i + ' value="' + mySliders[i].value + '" min="' + mySliders[i].min + '" max="' + mySliders[i].max  + '"  />';
    }

    $("#dynamicSliders").empty().append(html).enhanceWithin();    
});

For the example I have hardcoded the array instead of an AJAX call, the rest is what you would do on the AJAX call return. The final enhanceWithin() tells jQM to style the sliders.

For attaching the change event you use event delegation. I have assigned a class called dynSlider to all sliders, then attach the change event to the container DIV and delegate it to all child elements with the class of dynSlider (with delegation it does not matter if the DOM element exists or is added in the future as the event is caught on the container):

$("#dynamicSliders").on("change", ".dynSlider", function(){
    alert($(this).val());
});

Here is a full DEMO

Obviously in your real-world app, you would need to assign meaningfull IDs or data attributes to the sliders so that you know what to update when changes are made.

Create JQuery Mobile slider at runtime and set onchange listener

1 Answers1