CODEWITHSUNDEEP
jqueryjquery-mobile
WeslyM
WeslyM

Reputation: 61

JQuery Mobile Dynamic List from Ajax Call

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

      }
    }

Upvotes: 5

Views: 9402

Answers (2)

Amir
Amir

Reputation: 53

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

Upvotes: 0

Ben
Ben

Reputation: 7597

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');

Upvotes: 10

Related Questions