2016-05-31 28 views
0

対私は動的にいくつかのランダムなJSONデータを使用してHTMLリストを作成しようとしている コードがある - enter image description hereリストビューHTML静的、動的

- 私はこのコードを実行すると

<div data-role="page" id="pageone"> 
    <div data-role="header"> 
     <h1>Lists</h1> 
    </div> 
    <div data-role="main" class="ui-content"> 
     <h2>AJAX List View</h2> 
     <div id='list'></div> 
    </div> 
     <script type="text/javascript"> 
      var str; 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       str = xmlhttp.responseText; 
       str = JSON.parse(str); 
       var q = ""; 
       for(i=0;i<str.length;i++) { 
       q += "<div data-role='collapsible' data-inset='false'><h4>" + str[i].title + "</h4>"; 
       q += "<ul data-role='listview' data-inset='true'><li>Details: " + str[i].duration + "</li><li>Price: " + str[i].price + "</li></ul>"; 
       q += "</div>"; 
       } 
       document.getElementById('list').innerHTML = q; 
      } 
      }; 
      xmlhttp.open("GET", "http://phonegappro.esy.es/test/json.php", true); 
      xmlhttp.send();  
     </script> 
</div> 

が、それはこのような何かを見て

しかし、私は静的な方法ですべてのUL & OLを書くことで上記をやろうとすると、必要に応じて実行されます。

enter image description here

ヘッダーLibsの -

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
+0

JSONで実行し、出力されているHTMLを投稿してください。 –

+0

はここに出力されているHTMLです - http://pastebin.com/788PMLsH –

+1

'data-role ="折りたたみ可能なアイテムを折りたたむためにどのライブラリを使用していますか?どうやら、あなたのスクリプトがHTMLを注入する前に実行されているようです。 onloadと呼ばれる関数が見つかった場合は、HTMLの挿入が完了したら同じ関数を呼び出します。 –

答えて

1

data-role="collapsible" & data-role="listview"はjQueryMobile・オブジェクトの属性でありましたか?

「はい」の場合は、正常にロードされたajaxの後に、正しい外観でコンパイルされていることを確認するために再描画する必要があります。 、あなただけのようにこれら二つの初期化子を追加必要なスクリプトについては

$("#mylist").listview(); 

は、この使用して折りたためるを描くことができ、jQueryMobile api documentationから指し:

$(".selector").collapsible(); 

を、これはlistviewため、描画のinitですこれは:

var str; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     str = xmlhttp.responseText; 
     str = JSON.parse(str); 
     var q = ""; 
     for (i = 0; i < str.length; i++) { 
      q += "<div data-role='collapsible' data-inset='false'><h4>" + str[i].title + "</h4>"; 
      q += "<ul data-role='listview' data-inset='true'><li>Details: " + str[i].duration + "</li><li>Price: " + str[i].price + "</li></ul>"; 
      q += "</div>"; 
     } 
     document.getElementById('list').innerHTML = q; 
    } 

    $('div[data-role="collapsible"]').collapsible(); 
    $('ul[data-role="listview"]').listview(); 
}; 
xmlhttp.open("GET", "http://phonegappro.esy.es/test/json.php", true); 
xmlhttp.send(); 

私は私のb ja:

+0

thnxそれは働いた! –

+0

よろしくお願いします:) –