¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Refrescando (y creando) widgets en jQuery Mobile

jQuery Mobile es un increíble framework para desarrollo de aplicaciones web móviles y, si sois lectores habituales del blog, seguro que sabéis que forma parte de mi arsenal particular para desarrollar.

No obstante, como todo en esta vida, no todo es perfecto y jQuery Mobile tiene algunos puntos que no gustan tanto. Sin duda muchos de los que comienzan a desarrollar con este framework descubren pronto que en el momento en que intentan añadir, actualizar o eliminar elementos de la página usando JavaScript, la página parece romperse. En este artículo vamos a revisar cada uno de los widgets de jQuery Mobile y cómo podemos refrescarlos para que no se “rompan” después de hacerles cambios.

Por regla general, necesitaremos valernos de estos métodos porque o bien hayamos añadido algo a un widget que no estaba ahí (como un nuevo botón, nuevos elementos a una vista de lista, etc) o bien porque cambiemos algún valor de un elemento existente (como el valor seleccionado en un desplegable).

Esto ocurre por la forma en la que trabaja jQuery Mobile en la que un simple botón:

<a href="#" data-role="button">Botón</a>  

Pasa a convertirse en esto tras ser inicializado:

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">  
  <span>
    <span>Botón</span>
  </span>
</a>  

Vamos a ver cómo procedemos.

Refrescando botones

$('#miboton').button('refresh');

Refrescando collapsible sets (acordeones)

$('#acordeon').collapsibleset('refresh');

Refrescando control deslizable

<label for="slider-0">Deslizable:</label> <input type="range" name="slider" id="slider-0" value="60" min="0" max="100" />  
<script>  
$('#slider-0').val(80).slider('refresh');
</script>  

Refrescando toggle-switch (botón on/off)

<label for="flip-a">Enciende/apaga:</label>  
<select name="slider" id="flip-a" data-role="slider">  
  <option value="off">Off</option>
  <option value="on">On</option>
</select>  
<script>  
var toggle = $("#flip-a"); toggle[0].selectedIndex = 1; // Esto lo apaga toggle.slider("refresh");  
</script>  

Refrescando radio buttons (botones de opción)

<fieldset data-role="controlgroup">  
  <legend>Escoge uno:</legend>
  <input type="radio" name="radio" id="radio-1" value="bulbasaur" checked="checked" />
  <label for="radio-choice-1">Bulbasaur</label>
  <input type="radio" name="radio" id="radio-2" value="charmander" />
  <label for="radio-choice-2">Charmander</label>
  <input type="radio" name="radio" id="radio-3" value="squirtle" />
  <label for="radio-choice-3">Squirtle</label>
</fieldset>  
<script>  
$("input[value=charmander]").attr('checked',true).checkboxradio('refresh');
</script>  

Refrescando checkbox (casillas de opción)

<label>  
  <input type="checkbox" name="checkbox-1" id="checkbox-1" />
  Me gusta
</label>  
<script>  
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
</script>  

Refrescando selects

<label for="pokemon">Escoge uno:</label>  
<select name="pokemon" id="pokemon">  
  <option value="bulbasaur">Bulbasaur</option>
  <option value="charmander">Charmander</option>
  <option value="squirtle">Squirtle</option>
  <option value="pikachu">Pikachu</option>
</select>  
<script>  
var select = $("#pokemon");  
select[0].selectedIndex = 3;  
//Squirtleee 
select.selectmenu('refresh');  
</script>  

Refrescando list views (vistas de lista)

$('#milista').listview('refresh');

Refrescando varios widgets a la vez

Si, con una sola función por ejemplo, cambiamos varios widgets a la vez y queremos evitar tener que estar llamando a cada plugin en específico por cada acción que hagamos, solo tenemos que hacer esto:

$('#contenedor').trigger('refresh');

Donde #contenedor es la div o, lo que sea, donde tengamos almacenados todos los widgets que queramos refrescar. Ten en cuenta que cuanto más específico sea el contenedor, mejor rendimiento conseguirás en la aplicación.

Creando nuevos widgets

¿Has llamado a algún método refresh, y te ha aparecido un error como este?

Uncaught cannot call methods on listview prior to initialization; attempted to call method refresh

Si en vez de modificar un widget ya mejorado por jQuery Mobile, te toparás con este error. Lo que viene a decir el error, es que el widget no ha sido aun mejorado por lo que le resulta imposible “refrescarlo”.

Para crear un widget solo tenemos que llamar al método principal del widget, sin 'refresh'.

Por ejemplo:

$('#mipagina').append('<a href="" data-theme="e" id="nuevoBoton">Prueba</a>'); 
$('#nuevoBoton').button();

Creando varios widgets a la vez

De la misma forma que podemos refrescar varios widgets a la vez, podemos crear varios widgets a la vez. Tan solo tenemos que cambiar 'refresh' por 'create'.

$('#contenedor').trigger('create');

Esto es todo sobre refrescar y crear. Espero que el artículo os haya parecido al menos “refrescante”, ¡que hace mucho calor!

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!