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