json data jquery.append formatting issue

Question

I'm trying to build a menu for a mobile app (using jQuery Mobile). I have an .asp page that queries SQL to pull the menu items (one for now, represented below by json[0].CompanyName). It returns as JSON data. I want to append the value from SQL to the <ul> with ID "mylist". This works and appends the text inside json[0].CompanyName, but it does not have the formatting of the hard coded Item 1 and Item 2 of the menu. Why does the formatting from the CSS work for the two hard coded menu items, but not the dynamic one?

  <div data-role="content" data-theme="b">  
     <ul id="mylist" data-role="listview" data-inset="true" data-filter="true" >
     <li><a href="item1.html" >Hard Coded Menu Item 1</a></li>
     <li><a href="item2.html" >Hard Coded Menu Item 2</a></li>
        <script type="text/javascript">
            $(document).ready(function () {
                $.getJSON("getdata.asp", function (json) {
                    // alert(json[0].CompanyName);
                    $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>');
                });
            });
        </script> 
     </ul>
  </div>

Not seeing the issue. What does your CSS and generated html look like? Do you have a link to a live page? — swatkins
– swatkins, Commented Dec 14, 2011 at 19:52
What you see above is what I'm seeing when I view the source of the page when it's rendered in the browser. It seems like the CSS is applied to all the elements on the page and they render as they should...then the script gets fired, the menu item gets applied to the UL but the CSS doesn't get applied to the dynamically added item. Is there a way to perhaps reload the CSS but only after the script executes? — Corby Bender
– Corby Bender, Commented Dec 14, 2011 at 19:55

Jasper · Accepted Answer · 2011-12-14 19:54:54Z

3

You have to refresh the listview after you append to it:

        $(function () {
            $.getJSON("getdata.asp", function (json) {
                $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>').listview('refresh');
            });
        });

This will tell jQuery Mobile to re-initialize the listview element to add the proper CSS classes to the proper elements.

Documentation can be found here: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html (At the bottom of the page is a section called Updating lists)

Sometimes you run into the situation where you're not sure if the listview will be initialized yet, you can use this if/then to work-around that issue:

var $myList = $('#myList');
if ($myList.hasClass('ui-listview')) {
    $myList.listview('refresh');
} else {
    $myList.listview();
}

answered Dec 14, 2011 at 19:54

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

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

2 Comments

Corby Bender Over a year ago

Holy smokes, that did the trick. Thanks very much for helping a new guy. You've made my day.

Jasper Over a year ago

@CorbyBender You're welcome. This is a pretty common issue with jQuery Mobile. Also I notice you are using the document.ready event to run your code, check-out the top of the Events Docs page: jquerymobile.com/demos/1.0/docs/api/events.html

Collectives™ on Stack Overflow

json data jquery.append formatting issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related