CODEWITHSUNDEEP
jqueryjquery-mobile
matyig
matyig

Reputation: 454

Generate listview dynamically from ajax - refresh not working

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?

Upvotes: 0

Views: 4285

Answers (2)

Aaron
Aaron

Reputation: 1072

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.

Upvotes: 1

Rodrigo Dias
Rodrigo Dias

Reputation: 1340

It is not working of the first because you're append the UL tag as well. Try to append ONLY the 'LI' tags, the UL should already be in the html structure.

var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';

In your html:

   <ul data-role="listview" id="" data-split-icon="gear" data-split-theme="a" ></ul>

Upvotes: 0

Related Questions