JQuery Mobile Dynamic List from Ajax Call

Question

I have a list that is being created from an $.ajax call. The data inject seems to be working, but the HTML is not picking up the JQueryMobile styles for the listView. Can anyone offer any insight as to why this could 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 the info:

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

      }
    }

Answer 1

Be sure to refresh the list element once you've populated it, otherwise—as you've found—the jQM styles don't get applied:

SomeData_list.listview('refresh');