CODEWITHSUNDEEP
jqueryxmllistviewmobilejquery-mobile
Mário Carvalho
Mário Carvalho

Reputation: 1

Read from xml - output has jQuery Mobile listview

I'm trying to read some information from a .xml file and show it on a listview using jQuery Mobile.. I searched all sort of methods and I just can't do it... Can someone please help me?

Thanks

<!DOCTYPE html> 
<html> 
<head> 
<title>XXXXXX</title> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

SCRIPT TO GET INFORMATION FROM MARKERS

<script type="text/javascript">



function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var marker = jQuery(this);
            var name = marker.attr("name");
            $("last").append('<li class="arrow">' + name + '</li>');
        });
    });
}



</script>

</head>

BODY OF HTML.. Is the div=id correct?

<body onLoad="initialize()"> 

<div data-role="page" class="type-home"> 
    <div data-role="header">
        <h1>XXX</h1>
    </div>
    <div data-role="content"> 
        <div class="content-secondary">
        <div id="jqm-homeheader">
            <h1 id="jqm-logo"><img src="images/logo_final.jpg"/></h1>
        </div>
                <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">Menu</li>
                    <li class="arrow"><a href="inserir.html" data-transition="slide">Inserir</a></li>
                    <li class="arrow"><a href="find.html" data-transition="slide">Procurar</a></li>
                    <li class="arrow"><a href="map.html" data-transition="slide">Mapa</a></li>
                    <li class="arrow"><a href="contact_us.html" data-transition="slide">Termos e Condições</a></li>
                    <li class="arrow"><a href="contact_us.html" data-transition="slide">Contact Us</a></li>

                </ul>
        </div>
        <div class="content-primary" id="last">
            <ul data-role="listview">
                <li data-role="list-divider">Ultimos:</li>

            </ul>


        </div>
    </div>
</div>
</body>
</html>

-----------------------UPDATE------------

XML CODE

<?xml version="1.0" encoding="utf-8"?>


<!--
- Database: 'ond68nda_dataBase'
-->
<database name="ond68nda_dataBase">
    <!-- Table markers -->
    <table name="markers">
        <column name="id">1</column>
        <column name="name">asd</column>
        <column name="address">dasd</column>
        <column name="lat">37.437130</column>
        <column name="lng">-122.117012</column>
        <column name="type">restaurant</column>
    </table>
    <table name="markers">
        <column name="id">2</column>
        <column name="name">asd</column>
        <column name="address">dasd</column>
        <column name="lat">37.437130</column>
        <column name="lng">-122.117012</column>
        <column name="type">restaurant</column>
    </table>
    <table name="markers">
        <column name="id">3</column>
        <column name="name">dasd</column>
        <column name="address">dasdas</column>
        <column name="lat">37.440266</column>
        <column name="lng">-122.137436</column>
        <column name="type">restaurant</column>
    </table>
    <table name="markers">
        <column name="id">4</column>
        <column name="name"></column>
        <column name="address"></column>
        <column name="lat">0.000000</column>
        <column name="lng">0.000000</column>
        <column name="type"></column>
    </table>

Upvotes: 0

Views: 6248

Answers (1)

Jasper
Jasper

Reputation: 76003

It appears you are trying to append to the element with the ID of last, to do so you would use this selector: $('#last').

You don't want to append <li> elements to a <div> element though, so your selector should look like this: $('#last').children('ul').

I like to increase performance by caching HTML strings and then appending it all at once rather than making lots of calls to the .append() function:

function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        var output = [];
        jQuery(data).find("marker").each(function() {
            var name = jQuery(this).attr("name");
            output.push('<li class="arrow">' + name + '</li>');
        });
        $('#last').children('ul').append(output.join('')).listview('refresh');
    });
}

Notice the .listview('refresh') after I appended the new HTML to the listview, this will refresh the widget so it styles the newly added <li> elements properly.

Source: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html (at the bottom of the page)

Since I don't know the structure of your XML document I can't be sure that the .each() loop will work as you would like.

Also, since jQuery Mobile pages can be pulled-in by AJAX it is not a good idea to rely on the onload event to fire, instead bind the initialization to the pageinit event for the specific page:

$(document).delegate('.type-home', 'pageinit', function () {
    //run code here
});

Source: http://jquerymobile.com/demos/1.0/docs/api/events.html

UPDATE

function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        data = $($.parseXML(data));
        var output = [];
        data.find('table[name="markers"]').each(function() {
            var name = jQuery(this).children('[name="name"]').text();
            output.push('<li class="arrow">' + name + '</li>');
        });
        $('#last').children('ul').append(output.join('')).listview('refresh');
    });
}

Here is a demo: http://jsfiddle.net/7ZeEG/

Note that you can also set the dataType of your $.get() call to xml instead of using: data = $($.parseXML(data)); (untested):

function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        var output = [];
        data.find('table[name="markers"]').each(function() {
            var name = jQuery(this).children('[name="name"]').text();
            output.push('<li class="arrow">' + name + '</li>');
        });
        $('#last').children('ul').append(output.join('')).listview('refresh');
    }, 'xml');//see that I declared a XML dataType right here
}

Upvotes: 2

Related Questions