json data jquery.append書式設定の問題

Question

モバイルアプリケーションのメニューを作成しようとしています（jQuery Mobileを使用しています）。 .aspページには、SQLにクエリを実行してメニュー項目を取得します（今のところ、json[0].CompanyNameで表されます）。 JSONデータとして返されます。 SQLの値をID「mylist」の<ul>に追加したいと思います。これは動作し、json[0].CompanyNameの中にテキストを追加しますが、メニューのハードコードItem 1とItem 2の書式はありません。 2つのハードコーディングされたメニュー項目ではCSSのフォーマットが機能しますが、動的なものではないのはなぜですか？

<div data-role="content" data-theme="b"> 
    <ul id="mylist" data-role="listview" data-inset="true" data-filter="true" > 
    <li><a href="item1.html" >Hard Coded Menu Item 1</a></li> 
    <li><a href="item2.html" >Hard Coded Menu Item 2</a></li> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $.getJSON("getdata.asp", function (json) { 
        // alert(json[0].CompanyName); 
        $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a> </li>'); 
       }); 
      }); 
     </script> 
    </ul> 
    </div> 

Answer 1

あなたは、あなたがそれに追加した後listviewを更新する必要があります。

 $(function() { 
      $.getJSON("getdata.asp", function (json) { 
       $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a> </li>').listview('refresh'); 
      }); 
     }); 

これは、適切な要素に適切なCSSクラスを追加するために再初期化listview要素にjQueryのモバイルを教えてくれます。

マニュアルは、ここで見つけることができます：http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html（ページの一番下にセクションが更新リストと呼ばれる）

時々、あなたはlistviewがまだ初期化されるかどうか分からないような状況に遭遇しますこの問題を回避するには、if/thenを使用できます。

var $myList = $('#myList'); 
if ($myList.hasClass('ui-listview')) { 
    $myList.listview('refresh'); 
} else { 
    $myList.listview(); 
}