Question

I’d like to generate a listview dynamically with jquery mobile. I have this code but the .listview(‘refresh’) is not working:

<div id="content" data-role="content">       
</div><!-- /content -->

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "my.json",
        dataType: "json",
        success: function(articles) {
            var html = '<ul id="hellolist" data-role="listview"><li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li></ul>';            
            $('#content').append($(html));
            $('#hellolist').listview('refresh');
        }                            
    });
</script>

If I generate only the list items or I don’t use ajax the refresh formats the listview well.

test #1: it works well.

<div id="content" data-role="content">
    <ul id="hellolist" data-role="listview"> </ul>
</div><!-- /content -->

<script type="text/javascript">
        var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';            
        $('#hellolist').append($(html));
        $('#hellolist').listview('refresh');
</script>

test #2: it works well.

<div id="content" data-role="content">       
</div><!-- /content -->

<script type="text/javascript">
        var html = '<ul id="hellolist" data-role="listview"><li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li></ul>';            
        $('#content').append($(html));
        $('#hellolist').listview('refresh');
</script>

test #3: it works well.

<div id="content" data-role="content">
    <ul id="hellolist" data-role="listview"> </ul>       
</div><!-- /content -->

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "my.json",
        dataType: "json",
        success: function(articles) {
            var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';            
            $('#hellolist').append($(html));
            $('#hellolist').listview('refresh');
        }                            
    });
</script>  

Anybody has any idea to solve this issue?

Answer 1

If you don’t want the empty UL tag in the HTML, you can try calling the .trigger(‘create”) method instead of .listview(“refresh”);

If that doesn’t work, try just calling .listview(); without the “refresh” param.

So, basically, instead of

$('#hellolist').listview('refresh');

try

$('#hellolist').trigger('create');

or

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

Good luck.

Edit: If things still aren’t working, you might instead try triggering the create event on the page containing the new list.