Jquery Mobile, slider won't refresh after value change

Question

I'm having a little problem, i'm working with localstorage and im loading a value, the idea is that the slider change with that value. I got the load part right, it load the number i want (i can display it in an alert so i know is ok), but when a try to put the slider with that number, it just stay with the dafult value (i try to deactivate it and the problem is the same). The method runs when the page is readyHere is the code:

function mostrarValoresOpcionesGuardados()
{

    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    var nombre = localStorage.getItem(localStorageKey1);
    var peso = localStorage.getItem(localStorageKey2);
    var altura = localStorage.getItem(localStorageKey3);
    var edad = localStorage.getItem(localStorageKey4);
    $("#nombreUsuarioOpciones").val(nombre);
    $("#pesoUsuario").val(peso).slider("refresh"); //this doesn't work
    $("#alturaUsuario").val(altura);
    $("#edadUsuario").val(edad);
    alert(nombre+" "+peso+" "+altura+" "+edad);
};

I also try this way: $("#pesoUsuario").val(peso); $("#pesoUsuario).slider("refresh")); but it's not working either. This is the div from the slider:

<div data-role="fieldcontain">
        <label for="pesoUsuario">
            Peso (kg)
        </label>
        <input id="pesoUsuario" type="range" name="pesoUsuario" value="95" min="0"
        max="200" data-highlight="true">
    </div>

Solution to your problem is obvious, but before I write I will teach you another thing. You have several questions and you didn't accept any one of them, at least two of them are correct. People who gave you answers expect something in return and that is reputation. — Gajotres, Jul 29 '13 at 20:28
already acept the answers, i didn't know i have to select the answer that help me. I will start doing it — Alexis Polak, Jul 29 '13 at 20:35
Don't worry, we are here to remind you and give you a helping hand. Regarding your question, have you tried converting localStorageValue to integer before adding it to the slider: $("#pesoUsuario").val(parseInt(peso)).slider("refresh"); — Gajotres, Jul 29 '13 at 20:47

score 5 · Accepted Answer · edited May 23 '17 at 11:52

I found a problem in your code. When working with a jQuery Mobile you should not use document ready. As usual it will trigger before jQuery Mobile can prepare widgets inside a DOM. To counter this you need to use appropriate jQuery Mobile page event. Read this ANSWER to find a difference between document ready and page events.

Working example: http://jsfiddle.net/Gajotres/k7C26/7/

Change this:

$(document).ready(mostrarValoresOpcionesGuardados());

to this:

$(document).on('pagebeforeshow', '#opciones', function(){ 
    mostrarValoresOpcionesGuardados()
});

krishwader · Answer 2 · 2013-07-30T06:32:39.343

Your code must be throwing an error right now :

Cannot call "refresh" prior to initialization

To fix that (and your problem), You need to initialize the slider before refreshing it, like this :

 $("#pesoUsuario").val(peso).slider().slider("refresh");

Edit :

In your code you are doing this :

$(document).ready(mostrarValoresOpcionesGuardados()); //2 times

The () must not be there. Reason is because in jQuery you pass the function as a callback, not invoke it. You have to do two things :

Change ready event to this :

$(document).ready(mostrarValoresOpcionesGuardados);

Remove the ready event in the last line.

Here's a demo : http://jsfiddle.net/k7C26/8/

Although this will work in your case (because you don't have multiple pages in your fiddle), you must try to structure your code to function through the pageinit event. This way,

You could customize all the markup of one page under on umbrella. For example, you could bind the click events, validation of the <button/>s, <input/>s inside the opciones page to the page container. This way all the controls would be streamlined and manageable.
Since pageinit event fires before DOM ready and loads only part of the DOM, its faster that using DOM ready.
DOM ready will initialise all elements in your page, which is not what you want if you want to use ajax injection method of jQM. Using pageinit will load up only the correct page and will load other pages through ajax.

Here's how you can re-structure it :

$(document).on("pageinit", "#opciones", function () {
    //bind click event to page, delegate from there
    $(this).on('click', "#botonGuardarOpciones", guardarDatosOpciones);
    //call function which loads data from localStorage
    mostrarValoresOpcionesGuardados();
});

Here's a demo for this : http://jsfiddle.net/hungerpain/k7C26/9/

Thanks, but this doesn't work for me, when i put ` $("#pesoUsuario").val(peso).slider().slider("refresh");` another slider apears and is not changing the #pesoUsuario slider — Alexis Polak, Jul 29 '13 at 20:39
Could you make a fiddle for this? Don't bother using local storage n stuff ..just use values. — krishwader, Jul 29 '13 at 20:44
I can't make it in fiddle, don't know why, this is all i got: http://jsfiddle.net/k7C26/3/ //(i'm using jquery mobile, can't find it in fiddle) — Alexis Polak, Jul 29 '13 at 21:03
[Image](http://k40.kn3.net/2/7/A/0/8/F/3C0.jpg) this is the what i get with your answer, you can see that appears a new slider betwen PESO and ALTURA — Alexis Polak, Jul 29 '13 at 21:16

Jquery Mobile, slider won't refresh after value change

2 Answers2