jQM - Dynamically populate listview from XML

by Anov Siradj

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-role="header">
            <h1>XML Parsing demo</h1>
        </div>        
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="cars-data">

            </ul>
        </div>       
    </div>
    <div data-role="page" id="cars">
        <div data-role="header">
            <a data-role="button" data-transition="none" data-theme="a" href="#index">Back</a>          
            <h1></h1>
        </div>        
        <div data-role="content">
            <ul data-role="listview" data-inset="true" id="car-data">

            </ul>
            <img src=""width="100%" style="height: auto;" id="car-img"/>
        </div>
    </div>    
</body>
</html>

CSS

li span {
font-weight: normal;
}

* {
    font: 14px Calibri,Arial !important;
}

JavaScript

$(document).on('pagebeforehide', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(loader);
    },1); 
}); 

$(document).on('pageshow', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(loader);
    },1); 
});    

$(document).on('pagebeforeshow','#index',function(e,data){    
    $('#cars-data').empty();
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        dataType: "xml",
        data: {
            xml: "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>"
        },
        success: function(xml) {
            ajax.parseXML(xml);
        },
        error: function (request,error) {
            alert('Network error has occurred!');
        }
    });
});

$(document).on('pagebeforeshow', '#cars',function () {
    $("#cars div[data-role='header'] h1").html(carObject.carName);
    $('#car-data').empty();
    $('#car-data').append('<li>Car Type:<span> ' + carObject.carName + '</span></li>');
    $('#car-data').append('<li>Car Country:<span> ' + carObject.carCountry + '</span></li>');        
    $('#car-data').append('<li>Car Description:<span> ' + carObject.description + '</span></li>');    
    $('#car-data').listview('refresh');   
    $('#car-img').attr('src' , carObject.img );    
    
});

var ajax = {  
    parseXML:function(result){
        $(result).find("car").each(function(){
            carObject.carName  = $(this).find('name').text();
            carObject.carCountry  = $(this).find('country').text();
            carObject.img  = $(this).find('pic').text();
            carObject.description  =...