2011-07-23 5 views
5

Mam listę, która jest tworzona z połączenia $ .ajax. Wtyczka danych działa, ale HTML nie odbiera stylów JQueryMobile dla listView. Czy ktokolwiek może zaoferować wgląd w to, dlaczego tak się dzieje?Dynamiczna lista JQuery Mobile z połączenia Ajax

Oto wywołania AJAX:

function getF(){ 
     // Show a loading message 
     var SomeData_list = document.getElementById("SomeData_list"); 
     SomeData_list.innerHTML = "<li>Loading...</li>"; 

     var gUrl = "SomeData_list.php?; 
     // Do the ajax call 
     $.ajax({ 
      url: gUrl, 
      // Callback (onsuccess) 
      success: function(d, status, req){ 
      var json = eval('(' + d + ')'); 
      showSomeData(json); 
      }, 
      // Error handler 
      error: function(req, status, err){ 
      // Alert the user that something went wrong 
      var group_list = document.getElementById("group_list"); 
      SomeData_list.innerHTML = "<li>An error occured. Conversations could not be loaded<br>"+status + ": " + err + "</li>"; 
      } 
     }); 
     } 

Ten kod wyświetla informację:

function showSomeData(json){ 
     var SomeData_list = document.getElementById("SomeData_list"); 
    SomeData_list.innerHTML = ""; 
    var dt =json.results; 
     if (dt.length <= 0){ 
     SomeData_list.innerHTML += "<li>Error Message.</li>"; 
     } 

     else{ 
      for (var i=0; i<dt.length; i++){ 
      SomeData_list.innerHTML += "<ul data-role='listview' data-theme='d'><li class=\"data-role='listview' data-theme='d'\"><a href='index.html'> <img src='photo.png' width='70' /><h3>Some Stuff Here</h3><p>213</p></a></li></ul>"; 
     } 

     } 
    } 

Odpowiedz

10

Pamiętaj, aby odświeżyć element listy kiedy już wypełniona, w przeciwnym razie, jak masz found-style jQM nie stosuje się:

SomeData_list.listview('refresh'); 
+0

Ben Dziękuję za odpowiedź. Gdzie ją umieścić? Próbowałem tego wcześniej bez powodzenia. Czy powinien być wymieniony w pętli? –

+0

Tak jak powiedziałem powyżej, nie należy go wywoływać, dopóki nie zakończysz dołączania elementów do listy, tj. ** po ** pętli. – Ben

0
$('#list').trigger("create");...