如何從Jquery Mobile中的XML填充另一個頁面上的列表

我想要做的是使用JQuery Mobile我想動態加載#newPage上的內容，具體取決於我點擊的選項。以下是我嘗試轉到#newPage的代碼，但不加載任何內容。我儘可能提供儘可能多的信息，並逐行評論我想要做的事情。如何從Jquery Mobile中的XML填充另一個頁面上的列表

示例XML：

<parentOption> 
    <option1> 
     <name>Stuff</name> 
    </option1> 
    <potion2> 
     <name>More Stuff</name> 
    </potion2> 
    <option3> 
     <name>Even More Stuff</name> 
    </option3> 
</parentOption>

假設我已經通過Ajax連接到XML文件：

<script> 
    function parseXML(xml) { //Parse the XML 
     $('selected').click(function(e) { //Once the link is clicked 
      var selectedValue = $(this).value(); //Find the value of the clicked link 
      e.preventDefault(); //Refresh the new page 
      $(xml).find(selectedValue).each(function() { //take the XML info and select all of the elements equaling to the value of the selected link 
       var nameValue = $(this).parent(); //Find the parent of the selected element 
       $('#dynamicList').append('<li>' + $(nameValue).child('name').text() + '</li>'); //Write out the list on the new page 
      }); 
      $('#dynamicList').listview('refresh'); 
     }); 
    } 
</script> 
<div data-role="page" id="home"> 
    <div data-role="content"> 
     <ul data-role="listview"> 
      <li><a class="selected" value="option1" href="#newPage">Option 1</a></li> 
      <li><a class="selected" value="option1" href="#newPage">Option 2</a></li> 
      <li><a class="selected" value="option1" href="#newPage">Option 3</a></li> 
     </ul> 
    </div> 
</div> 
<div data-role="page" id="newPage"> 
    <div data-role="content"> 
     <ul id="dynamicList" data-role="listview"> 

     </ul> 
    </div> 
</div>

這裏是點擊第一個鏈接後期望輸出：

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <ul data-role="listview"> 
      <li><a class="selected" value="option1" href="#newPage">Option 1</a></li> 
      <li><a class="selected" value="option1" href="#newPage">Option 2</a></li> 
      <li><a class="selected" value="option1" href="#newPage">Option 3</a></li> 
     </ul> 
    </div> 
</div> 
<div data-role="page" id="newPage"> 
    <div data-role="content"> 
     <ul id="dynamicList" data-role="listview"> 
      <li>Stuff</li> 
     </ul> 
    </div> 
</div>

來源

2012-12-15 eciusr

有一個錯別字......'dqta-role =「content」'應該是'data-role =「content」'......你不使用jQuery的listview，這是否如你所願？使用jQuery列表視圖，你可以在構建它之後刷新列表視圖... – Taifun

對不起，錯誤代碼只是我輸入的一個例子，儘可能通用。至於$（'＃dynamicList'）.listview（'refresh'），我確實忘記在.each（function（）... – eciusr

這意味着，你也**忘記**數據 - 在你的例子中，role =「listview」是什麼？'

'你可能試着把一個正確的例子放在一起？ – Taifun

我給你做了一個實例，看看這裏：http://jsfiddle.net/Gajotres/AzXdT/。此外，我需要給你一個警告，這個例子只適用於jsFiddle，因爲你不能從其他域加載xml。如果你想從您的域名（您的託管服務器）加載XML使用此代碼：

$.ajax({ 
    type: "GET", 
    url: "sites.xml", 
    dataType: "xml", 
    success: function(xml) { 

    } 
});

如果可能的話使用JSON而不是XML。原因，複雜的XML可能會有很大的數據開銷。創建JSON的想法來解決這個問題。如果你想嘗試一下，我再給你一個例子：http://jsfiddle.net/Gajotres/8uac7/。這個例子可以在任何地方使用，所以隨時隨地使用它。

來源

2012-12-16 10:27:01 Gajotres

謝謝，使用XML文件，但是，它已切換到JSON。 – eciusr

如何從Jquery Mobile中的XML填充另一個頁面上的列表

回答

相關問題