Читать из xml - вывод имеет jQuery Mobile listview - PullRequest
Новая
       12

Читать из xml - вывод имеет jQuery Mobile listview

0 голосов
/ 28 декабря 2011

Я пытаюсь прочитать некоторую информацию из файла .xml и показать ее в виде списка с помощью jQuery Mobile .. Я искал все виды методов и просто не могу это сделать ... Кто-нибудь может мне помочь?

Спасибо 

<!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 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>

ТЕЛО HTML .. Правильно ли div = id? 

<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>

----------------------- ОБНОВЛЕНИЕ ------------

XML-код 

<?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>

1 Ответ

2 голосов
/ 28 декабря 2011

Похоже, вы пытаетесь добавить элемент с идентификатором last, для этого вы должны использовать этот селектор: $('#last').

Вы не хотите добавлять элементы <li> к элементу <div>, поэтому ваш селектор должен выглядеть так: $('#last').children('ul').

Мне нравится повышать производительность, кэшируя строки HTML, а затем добавляя их все сразу, а не совершая множество вызовов функции .append(): 

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');
    });
}

Обратите внимание на .listview('refresh') после того, как я добавил новый HTML-код к listview, это обновит виджет, чтобы правильно стилизовать новые добавленные элементы <li>.

Источник: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html (внизу страницы)

Поскольку я не знаю структуру вашего XML-документа, я не могу быть уверен, что цикл .each() будет работать так, как вы хотели бы.

Кроме того, поскольку AJAX может извлекать страницы jQuery Mobile, не стоит полагаться на событие onload для запуска, вместо этого связывайте инициализацию с событием pageinit для конкретной страницы: 

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

Источник: 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');
    });
}

Вот демоверсия: http://jsfiddle.net/7ZeEG/

Обратите внимание, что вы также можете установить dataType вашего $.get() вызова на xml вместо использования: data = $($.parseXML(data)); (не проверено): 

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
}
...