jQueryMobile listview not styling; syntax seems correct

Question

I have a listview that's dynamically generated from a JSON file as such:

$.getJSON('test2.json', function(data) {
                var items = [];
                $.each(data, function(key, val) {
                    items.push('<li data-theme="c" data-icon="myapp-arrow" class="test1"><a href="#dataviewer" data-transition="slide"><p>' + key + '</p>' + val + '</a></li>');
                });
                $('<ul/>', {'data-role' : 'listview','id': 'my-new-list', 'data-divider-theme':'a', 'data-inset': 'false',html: items.join('')}).appendTo('.container');
                alert('Here is where the refresh should fire!');
                $("#my-new-list").listview("refresh");
            });

It adds the list items to the page, but it doesn't style them at all. Using Chromes inspector, if I copy and paste the list code into my html document, it styles just fine. What am I doing wrong?

Alert fires - just noticed the list styles correctly if I navigate to it from another page, but not if the page itself is refreshed. — Squishy
– Squishy, Commented Apr 24, 2012 at 10:49
Ok I suspect then it has to do with something else in your code. Can you show us more or create a jsFiddle illustrating the problem. Let me ask you this are you using using dom ready i.e $(function(){ ... }); instead of binding to pageinit? — codaniel
– codaniel, Commented Apr 24, 2012 at 10:57

codaniel · Accepted Answer · 2012-04-24 10:19:16Z

2

Try $('.ui-page').trigger("create");. You can't refresh a listview if it hasn't been created yet.

edited Apr 24, 2012 at 10:19

answered Apr 24, 2012 at 10:11

codaniel

5,2531 gold badge25 silver badges32 bronze badges

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

Comments

Squishy · Accepted Answer · 2012-04-25 08:55:12Z

Binding the function to a page init and removing the "refresh" from the .listview() method solved my issue. As far as I can tell, any additional list building after this initial function should include ('#page-id').listview(refresh); and it should update just fine.

$( '#searchpage' ).live( 'pageinit',function(){
                $.getJSON('test2.json', function(data) {
                    var items = [];
                    $.each(data, function(key, val) {
                        items.push('<li data-theme="c" data-icon="myapp-arrow" class="test1"><a href="#dataviewer" data-transition="slide"><p>' + key + '</p>' + val + '</a></li>');
                    });
                    $('<ul/>', {'data-role' : 'listview','id': 'my-new-list', 'data-divider-theme':'a', 'data-inset': 'false',html: items.join('')}).appendTo('.container');
                $("#my-new-list").listview();               
                });
            });

Thanks to codaniel for nudging me in the right direction

Collectives™ on Stack Overflow

jQueryMobile listview not styling; syntax seems correct

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related