CODEWITHSUNDEEP
jquerymobilewebkitjquery-mobile
dave
dave

Reputation: 125

Parsing XML correctly with jQuery but CSS does not take effect

First time playing with jQuery Mobile but have used jQuery a little bit. was hoping for some quick advice.

I am parsing some xml in the head and writing the data as a list in a div with <li> tags. The list appears there but is not formatted with the default styling from jQuery Mobile. I'm sure its something I'm doing wrong but can't figure out what I need to do to apply the style or maybe I need to get the data outside of "ready". Here's my code.

It's gotta be something so simple that i'm missing. If I hard code in the <li> tags in the HTML it works fine but if I use use .append() it shows no formatting for the list.

Would REALLY appreciate any tips you might have. 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Chart</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" />
    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.mobile-1.0a2.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "xml/vc-data.xml",
    dataType: "xml",
    success: function(xml){
        // build country list
        var currentCountry = "";
        var currentRegion = "";
        $("#countries").html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
        $(xml).find("charts").each(function()
        {
            var country = $(this).find('country').text();
            var region = $(this).find('region').text();
            if(currentCountry != country) {
                //countryList += "<li><a href='#'>" + country + "</a></li>";
                $("<li data-role='list-divider'></li>")
                .html(country)
                .appendTo("#countries ul");
            }
            if(currentRegion != region) {
            $("<li></li>")
                .html("<a href='#'>" + region + "</a>")
                .appendTo("#countries ul");
            }
            currentCountry = country;
            currentRegion = region;
        });
    }
  });
});

</script>
</head> 
<body> 

<!-- Start of first page -->
<div data-role="page">

    <div data-role="header">
        <h1>Charts</h1>
    </div><!-- /header -->

    <div data-role="content" id="countries" >   

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Hey. Thanks SOOO Much for this reply. I guess I was searching with the wrong keywords cause I just couldnt find this anywhere and have been stuck the past few days. I REALLY appreciated the help here. I was just about to move on to jqTouch as an option but would love to get this working. I think I'm almost there.

I tried adding this:

 $("#countries > ul").page();

but it didnt affect anything.

then I added: 

$("#countries div > ul").page();

which affected the link color but didnt style the rows at all with spacing, etc.

I then did some more digging and found this in the documentation that I missed:

If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example, $('ul').listview('refresh');

So I replaced page() with this line and it worked gloriously. 

$("#countries div > ul").listview('refresh');

Upvotes: 1

Views: 4228

Answers (1)

naugtur
naugtur

Reputation: 16915

It's not a simple thing you're missing. After it's done once jQuery mobile doesn't format newly created stuff automatically. I suppose it would be a performance hog.

You have to apply jQuery mobile .page() method to the topmost element that you create.

In your case I think it should be:

$("#countries>ul").page();

Detailed howto: http://jquerymobiledictionary.dyndns.org/faq.html

("How do I make JQM work with content I add to DOM?" question)

[edit]

I was assuming that #countries is a div inside the content and you create the ul element. You didn't read the tutorial I linked to. You absolutely have to create a new wrapping element. No element that existed in HTML source can be used with .page() because it already was.

Use this HTML

<div id="countries" data-role="page">    
    <div data-role="header">
        <h1>Chart</h1>
    </div><!-- /header -->

    <div data-role="content" id="here">   

    </div><!-- /content -->   
</div>

and this code for success function:

success: function(xml){
            // build country list
            var currentCountry = "";
            var currentRegion = "";
            $('#here').html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
            var $here=$('#here > ul');

            //var countryList = "";
            $(xml).find("chart").each(function()
            {
                var country = $(this).find('country').text();
                var region = $(this).find('region').text();
                if(currentCountry != country) {
                    $("<li></li>").html(country).appendTo($here);
                }
                if(currentRegion != region) {
                    $("<li></li>").html("<a href='#'>" + region + "</a>").appendTo($here);
                }
                currentCountry = country;
                currentRegion = region;
            });

            $here.page();
        }

If it doesn't work check one of these things:

  1. you should use jquery 1.4.3 (1.4.4 has some issues with jqm)
  2. see if the success function is being called at all

I tested it and it worked for me.

Upvotes: 1

Related Questions