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

      }
    }

Ben · Accepted Answer · 2011-07-24 19:36:18Z

9

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

answered Jul 24, 2011 at 19:36

Ben

7,59533 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WeslyM Over a year ago

Ben Thanks for the reply. Where would I place it? I tried this before with no luck. Should this be listed in the loop?

Ben Over a year ago

Like I say above, don't invoke this until you've finished appending items to the list, i.e. after the loop.

Amir · Accepted Answer · 2013-08-12 14:16:18Z

0

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

answered Aug 12, 2013 at 14:16

Amir

631 silver badge5 bronze badges

Collectives™ on Stack Overflow

JQuery Mobile Dynamic List from Ajax Call

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related