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 refresh
ing 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/