[英]How to populate list on another page from XML in Jquery Mobile
What I want to do is using JQuery Mobile I want to dynamically load content on #newPage depending on what option I clicked. 我要使用的是JQuery Mobile,我要根据我单击的选项在#newPage上动态加载内容。 Below is the code I tried that goes to #newPage, but does not load any content.
以下是我尝试转到#newPage,但未加载任何内容的代码。 I tried to give as much info as possible and commented line by line to what I wanted it to do.
我尝试提供尽可能多的信息,并逐行评论我想要它做的事情。
Sample XML: 样本XML:
<parentOption>
<option1>
<name>Stuff</name>
</option1>
<potion2>
<name>More Stuff</name>
</potion2>
<option3>
<name>Even More Stuff</name>
</option3>
</parentOption>
Assume I have connected to the XML file via Ajax: 假设我已经通过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>
Here is the desired output after clicking the first link: 单击第一个链接后,这是所需的输出:
<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>
I made you a working example, take a look here: http://jsfiddle.net/Gajotres/AzXdT/ . 我为您提供了一个工作示例,请在此处查看: http : //jsfiddle.net/Gajotres/AzXdT/ 。 Also I need to give you a warning, this example works only in jsFiddle because you can't load xml's from other domains.
我还需要警告您,此示例仅在jsFiddle中有效,因为您无法从其他域加载xml。 If you want to load xml from your domain (your hosting server) use this code:
如果要从您的域(您的托管服务器)加载xml,请使用以下代码:
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function(xml) {
}
});
If possible use JSON instead of XML. 如果可能,请使用JSON而不是XML。 Reason, complex XML can be big in size with a lot of data overhead.
原因是,复杂的XML可能会很大,并且会产生大量数据开销。 JSON is created with idea to fix this problem.
创建JSON的想法就是要解决此问题。 In case you want to try it I made you another example: http://jsfiddle.net/Gajotres/8uac7/ .
万一您想尝试一下,我举了另一个例子: http : //jsfiddle.net/Gajotres/8uac7/ 。 This example can be used everywhere so feel free to play with it.
该示例可在任何地方使用,因此可以随时使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.