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>

Answer 1

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()
});

Answer 2

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 :

1. Change ready event to this :

   $(document).ready(mostrarValoresOpcionesGuardados);
   

2. 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,

1. 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.
2. Since pageinit event fires before DOM ready and loads only part of the DOM, its faster that using DOM ready.
3. 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/