JQuery Mobile Dynamic List by Ajax Call

I have a list that is created from a call to $ .ajax. Data injection seems to work, but HTML does not collect JQueryMobile styles for listView. Can anyone give an idea of ​​why this might be happening?

Here is the Ajax call:

    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>";
          }
        });
      }

This code displays information:

    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>";
        }

      }
    }
+5
source share
2 answers

Be sure to update the list item as soon as you fill it, otherwise - as you already found - jQM styles are not applied:

SomeData_list.listview('refresh');
+10
source
 $('#list').trigger("create");...
0
source

All Articles