Jquery mobile - Actualizar casillas de verificación con pageinit

Llamo a una página (ver el código a continuación) de una lista de enlaces en otra página usando. Una lista como estaJquery mobile - Actualizar casillas de verificación con pageinit

<ul data-role="listview" data-theme="g"> 
     <li><a href="test.html">test</a></li> 
</ul>

con el siguiente código siendo la página test.html.

Estoy usando jquery mobile en estas páginas. Solo las casillas de verificación después de las primeras 3 casillas de verificación parecen actualizarse correctamente (aparecen como marcadas) cuando la página se carga haciendo clic en el enlace. Las primeras tres casillas de verificación siempre parecen estar desmarcadas y su valor verificado se establece en falso. Lo que es inusual es que si coloco una instrucción if justo después de la declaración que establece la casilla de verificación en verdadero, el valor marcado de casilla de verificación se evalúa como verdadero, pero parece ser falso en la página representada y se observa el valor verificado en el área de elementos del inspector web Cuando actualiza la página (usando F5 o el botón Actualizar cerca de la barra de direcciones), las casillas de verificación se actualizan como era de esperar. Cualquier ayuda sería muy apreciada. Mientras que el código de muestra siguiente parece simplemente establecer todas las casillas de verificación en un valor verificado, realmente estoy (en mi página real) configurando su valor basado en datos de un conjunto de registros, así que no puedo hacer una configuración masiva en true y actualizar. Tengo que recorrer el conjunto de registros y establecer los valores de la casilla de verificación en consecuencia. El siguiente código es solo una reproducción simple del error que estoy teniendo. ¡Gracias!

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Checkbox</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> 
      <link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" /> 
      <script src="jqm/jquery-1.7.1.min.js"></script> 
      <script src="jqm/jquery.mobile-1.0.1.min.js"></script> 

     </head> 
     <body> 
     <div id="loadCB" data-role="page"> 
      <script type="text/javascript"> 
       $("#loadCB").live('pageinit', function() { 
        // do something here... 


        for (i=0;i<=5;i++) 
        { 
        $("#checkbox-"+i).prop("checked", true); 
        $("#checkbox-"+i).prop("checked", true).checkboxradio("refresh"); 
        } 


       }); 
      </script> 

      <article data-role="content"> 


       <form id="frmR"> 
        <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/> 
        <label for="checkbox-0">checkbox-0</label> 
        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/> 
        <label for="checkbox-1">checkbox-1</label> 
        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/> 
        <label for="checkbox-2">checkbox-2</label> 
        <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/> 
        <label for="checkbox-3">checkbox-3</label> 
        <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/> 
        <label for="checkbox-4">checkbox-4</label> 
        <input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/> 
        <label for="checkbox-5">checkbox-5</label> 

        <input type="submit" value="Set Rules" /> 
       </form>    


      </article>   
     </body> 
    </div> 
    </html>

Fuente

2012-02-20 Paul in Colorado

escribí una lista bastante completa de los widgets y el método por el cual les actualiza: http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields

Tal vez que responderá a su pregunta?

Fuente

2012-02-20 17:17:07 commadelimited

Gracias por la respuesta. Parece que ya estoy usando un código similar al que muestra en su página. Mis casillas de verificación simplemente no parecen actualizarse correctamente cuando la página se carga desde otra página. –

Verificar el código

$("#loadCB").live('pageinit', function() { 
        // do something here... 


        $("input[type='checkbox']").attr("checked",false).checkboxradio("refresh"); 


       });

Fuente

2012-02-23 05:38:57 Hkachhia

Harry, gracias por los comentarios. Si bien esto configurará todas las casillas de verificación a verificar, no resuelve el problema en el ejemplo que proporcioné. Estoy configurando valores de casilla de verificación basados en un conjunto de registros devuelto desde una base de datos, por lo que no puedo establecer todos los valores en verdadero. Tengo que recorrer los registros y solo configurar las casillas de verificación que deben marcarse para verificar. Mi problema es que las primeras tres casillas de verificación nunca parecen actualizarse correctamente. Gracias. –

Jquery mobile - Actualizar casillas de verificación con pageinit

Respuesta

Cuestiones relacionadas