2012-02-20 11 views
6

私は別のページのリンクリストからページを呼び出しています(下記のコードを参照)。このようなリストJquery mobile - pageinitでのチェックボックスのリフレッシュ

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

下記のコードはtest.htmlページです。

私はこれらのページでjquery mobileを使用しています。リンクをクリックしてページが読み込まれると、最初の3つのチェックボックスの後のチェックボックスのみが適切に更新されているように見えます(チェックされていると表示されます)。最初の3つのチェックボックスは常に選択されていないように見え、チェックされた値はfalseに設定されています。珍しいのは、チェックボックスをtrueに設定した文の直後にif文を置くと、チェックボックスのチェック値はtrueに評価されますが、レンダリングされたページではfalseになり、要素エリアでチェックされた値を見ますWebインスペクタのページをリフレッシュすると(F5またはアドレスバーの近くのリフレッシュボタンを使用)、チェックボックスは期待どおりに更新されます。どんな助けでも大歓迎です。下のサンプルコードはすべてのチェックボックスをチェックされた値に設定しているように見えますが、私は本当に(私の実際のページで)レコードセットのデータに基づいて値を設定しています。私は、レコードセットをループし、チェックボックスの値をそれに応じて設定する必要があります。以下のコードは、私が持っているエラーを単純に再現したものです。ありがとうございました!

<!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> 

答えて

3

私はウィジェットとあなたがそれらをリフレッシュする方法のかなり包括的なリストを書いた: http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields

おそらくそれは、あなたの質問にお答えしますか!

+0

に返事をありがとう、このコードを確認してください。あなたのページに表示されているのと同じコードをすでに使用しているようです。私のチェックボックスは、ページが別のページから読み込まれたときに正しくリフレッシュされないようです。 –

6

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


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


       }); 
+0

ハリー、フィードバックいただきありがとうございます。これによりすべてのチェックボックスがオンに設定されますが、私が提示した例では問題は解決しません。すべての値をtrueに設定することができないように、データベースから返されたレコードセットに基づいてチェックボックスの値を設定しています。私はレコードをループし、チェックする必要があるチェックボックスだけをチェックする必要があります。私の問題は、最初の3つのチェックボックスが決して正しくリフレッシュされないということです。ありがとう。 –

関連する問題