閱讀從XML - 輸出有jQuery Mobile列表視圖

我想從一個.xml文件中讀取一些信息，並使用jQuery Mobile在列表視圖上顯示它..我搜索了各種方法，我只是不能做到這一點... 有人可以幫幫我嗎？閱讀從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>

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

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>

來源

2011-12-28 Mário Carvalho

你可以對哪些問題更具體你是否面臨 – 2011-12-28 19:33:00

您似乎在試圖追加到與last的ID的元素，這樣做你會使用這個選擇：$('#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()循環將工作，你想。

此外，由於jQuery Mobile的頁面可以拉通過AJAX它是不是一個好主意依靠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/

請注意，您還可以設置您的$.get()通話dataType到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 
}

來源

2011-12-28 19:45:32 Jasper

嗨，首先謝謝你。我瞭解你所做的改變，我知道這個問題是我從XML讀取屬性的方式。你能否說我是否正確閱讀？ – 2011-12-28 21:00:55

@MárioCarvalho我從來沒有真正用jQuery解析XML文檔，但我**更新**我的答案與我發現的工作。首先，您需要將您的服務器響應解析爲XML，然後可以使用'.find（）'定位所需的元素。 – Jasper 2011-12-28 21:57:51

閱讀從XML - 輸出有jQuery Mobile列表視圖

回答

相關問題