jQM - Dynamically populate listview from XML

by Dragan Gaić

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>  
</body>
</html>

CSS

li span {
font-weight: normal;
}

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

JavaScript

$(document).on('pagebeforeshow', '[data-role="page"]',function(e,data){  
    // Multiple Ajax Requests 
    $.when( 
        parseXML({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>"}) , 
        parseXML({xml: "<cars><car><name>RENAULT</name><country>FRANCE</country><pic>http://cdn2.carsdata.net/thumb/182x105/pics/Renault/renault-sandero-16-stepway-01.jpg</pic><description>Renault Sandero 16 Stepway - this car is manufactured by renault. Renault Sandero 16 Stepway - Get car information and expert advice from CarsData.</description></car></cars>"}) , 
        parseXML({xml: "<cars><car><name>AUDI</name><country>GERMANY</country><pic>http://img2.netcarshow.com/Audi-RS6_Avant_2014_800x600_wallpaper_06.jpg</pic><description>The new Audi RS6 Avant unites 412 kW (560 hp) of power and 700 Nm (516.29 lb-ft) of torque with unrestricted practicality for everyday use and leisure.</description></car></cars>"})
    ).done(
        function(data1, data2, data3)
        {
            var allData = [].concat(data1).concat(data2).concat(data3);
            $(allData).find("car").each(function(){
                $('#cars-data').append('<li><a href="#cars"><img src="' + $(this).find('pic').text() + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> '+ $(this).find('name').text() +'</span></h3><p>' + $(this).find('description').text() + '</p></a></li>'); 
            })
            $('#cars-data').listview('refresh');            
        }
    ).fail(
        function()
        {
            alert('Fail');  
        }
    );
    
    function parseXML(data)
    {
        return $.ajax({
            type: "POST",
            url: "/echo/xml/",
            dataType: "xml",
            data:...