Generate listview dynamically from ajax - refresh not working

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?

Aaron · Accepted Answer · 2012-11-23 17:06:18Z

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.

edited Nov 23, 2012 at 17:06

answered Nov 23, 2012 at 16:44

Aaron

1,0726 silver badges16 bronze badges

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

Comments

Rodrigo Dias · Accepted Answer · 2012-11-23 16:57:01Z

0

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>

edited Nov 23, 2012 at 16:57

answered Nov 23, 2012 at 16:40

Rodrigo Dias

1,3402 gold badges14 silver badges18 bronze badges

1 Comment

Aaron Over a year ago

I think he knows it works like that. See the test 3 from the post. The point is, if I am understanding correctly, he wants the ul to be added dynamically.

Collectives™ on Stack Overflow

Generate listview dynamically from ajax - refresh not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related