Question

My script takes a json call, splits it up, puts those values into an array and then counts down the array through a for loop, adding one value to a <li> element per loop. They each appear listed, but without any of jquery mobile’s style. Here is how it looks now;

by specifying the exact class of styled lists into the for loop, I was able to make it appear like this

\

however, that is also not ideal, as I can’t add a count bubble at the end, or a checkbox, for example.
is there a better way to do this? here is my current code

console.log('findById: ');
    $.ajax({
        type: 'GET',
        url: 'http://172.16.200.61:8080/RESTfulExample/blacksheep/api/getgroup',
        dataType: "jsonp",
        success: function(data){
            alert('findById success:' + data.groups);
            var json = data.groups;
            var jsplit=json.split(",");
            console.log(jsplit);
            Fill(jsplit);           
        },
        error : function (jqXHR, textStatus, errorThrown) {
         alert(textStatus);
         alert(errorThrown);
        },
    });

function Fill(input){
    for (i=0 ; i < input.length ; i++){
        document.getElementById("people").innerHTML += "<li>" + input[i] +  "</li>";        
    }
}

Answer 1

In JQuery Mobile, for elements that are injected dynamically to the page there is a need to run the appropriate method to apply JQM’s styling, in your case:

$('#mylist').listview();