0

I am developing a mobile app based on HTML5 & CSS & JS, powered by jQuery mobile.

I am creating a form programmatically. I use text fields and rangers (slider). After creating this inputs they aren't styled. No problem. For refreshing textfield style, I use:

$(selector).textinput();

.. and all works fine (only for input="text" of course).

But if I want to refresh a slider (ranger), I use this:

$(selector).slider("refresh");

AND I GET AN ERROR:

Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'refresh'

Ok. If I change with this:

$(selector).slider();

If works 50% : Look: http://postimg.org/image/8upkakkc1/ ..

===================================================================

My code:

HTML:

<div data-role="page" id="newclass_step4_complete" data-title="newclass_step4_complete">
        <div data-role="content" style="background-color:#fff;">
                <form>
                    <ul data-role="listview" data-inset="true" id="zdup_ul">
                        <li><br><span style="font-size:50px;color:#FFA500;margin-top:50px;" id="compl_name"></span><hr></li>

                        <li id="dupa_ultimu">
                            <hr>
                            <div class="ui-grid-a">
                                <div class="ui-block-a"><button type="button" id="discardvalcrits" data-inline='true'><i class='lIcon fa fa-chevron-left'></i>Înapoi</button></div>
                                <div class="ui-block-b"><button type="button" id="btn_save_ok_vals" data-inline='false' style="color:green;"><i class='lIcon fa fa-check'></i> Salveaza</button></div>
                            </div>
                        </li>
                    </ul>
                </form>
        </div>
    </div>

JS:

$(document).on("click", ".comp_var_btn", function(event){                    

                var idus = $(this).attr("compvar");

                $("#compl_name").html(lista_variante[idus]);

                var biguscontent = "";
                $.each( lista_criterii, function( crit_id, crit_vals ) {
                    if(crit_vals['evaluare'] == "valmare_avmare")
                        biguscontent = biguscontent + '<li data-role="fieldcontain" id="cu_del_aici_'+crit_id+'"><label for="cmpvar_'+crit_id+'">'+crit_vals['nume']+':</label><input type="text" id="cmpvar_'+crit_id+'" value="" data-clear-btn="true" placeholder="Valoarea mare .. avantaj mare"></li>';
                    else if(crit_vals['evaluare'] == "valmic_avmare")
                        biguscontent = biguscontent + '<li data-role="fieldcontain" id="cu_del_aici_'+crit_id+'"><label for="cmpvar_'+crit_id+'">'+crit_vals['nume']+':</label><input type="text" id="cmpvar_'+crit_id+'" value="" data-clear-btn="true" placeholder="Valoarea mica .. avantaj mare"></li>';
                    else
                        biguscontent = biguscontent + '<li data-role="fieldcontain" id="cu_del_aici_'+crit_id+'"><label for="cmpvar_'+crit_id+'">'+crit_vals['nume']+':</label><input type="range" id="cmpvar_'+crit_id+'" value="5" min="1" max="10" data-highlight="true"></li>';                


                });
                $("#dupa_ultimu").before(biguscontent);

                window.location = "#newclass_step4_complete";

                if(prima_data_tata == 1){
                   // works ok
                    $('#zdup_ul').listview('refresh');
                    $.each( lista_criterii, function( crit_id, crit_vals ) {
                        if(crit_vals['evaluare'] == "valmare_avmare" || crit_vals['evaluare'] == "valmic_avmare"){
                             // works ok
                            $("#cmpvar_"+crit_id).textinput();
                        }
                        else{
                            // HERE BIG FAIL

                            //$("#cmpvar_"+crit_id).slider( "value", 6 );
                            //$("#cmpvar_"+crit_id).slider();
                            //$("#slider").slider('value',9);
                            $("#cmpvar_"+crit_id).slider("refresh");
                            //$("#cmpvar_"+crit_id).remove();
                        }
                    });
                } else prima_data_tata = 1;

            });

So..? :(

1 Answer 1

2

in order to refresh input type range all you need to do is overwrite its value

you can do it like this:

$('input[type="range"]').val(newVal);

but this will probably NOT work with your code because you are generating those inputs from JS

so . first you will need to take 'biguscontent' and break it into multiple variables, one of them being the range input

you will end up with something like this

var rangeInput = <input type="range" value="" min="" max="" />
var biguscontent = '<li>..' + rangeInput + '...</li>...';

and then you will be able target the input separately and change its value

$(rangeInput).val(newVal)

here you can see a fiddle with range input 'refreshing' on click http://jsfiddle.net/wpa5rqc7/

3
  • Look: jsfiddle.net/p5cgsk4s I have something like that.. with your own idea.. It doesn't works.. Mar 16, 2015 at 19:26
  • jsfiddle.net/p5cgsk4s/1 updated the fiddle .. 1. on doc ready you attach the html to dom ... 2. on click you just update the value ... 3. there is no .slider() function in jquery Mar 17, 2015 at 10:24
  • I tired with $().trigger(); and verything seems to work. May 31, 2015 at 22:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.