我是jQuery Mobile和AJAX请求的新手。我会尽量保持清醒。
我正在开发一个移动项目,我正在使用jQuery Mobile自动完成列表,并使用XML文件填充它(因为它对我来说太复杂了现在是一个MySQL数据库。)
我已成功提取自动完成列表,其中填充了外部XML文件(lista.xml)中的数据,并使用以下代码:
<script>
$(function(){
$.ajax({
type: "GET",
url: "lista.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("anuro").each(function(){
Cientifico = $(this).find("n_cientifico").text();
Comun = $(this).find("n_comun").text();
Foto = $(this).find("foto").text();
Familia = $(this).find("familia").text();
SubFamilia = $(this).find("subfamilia").text();
$("#lista").append('<li><a href="#resultados" data-transition="slide"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></a></li>');
});
$("#lista").listview("refresh");
}
});
});
</script>
这是我页面内容部分的代码:
<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Buscar..." data-inset="true">
</ul>
现在这很好用。它加载我的XML文件中的所有数据,显示anuro(青蛙)和家庭的正确图片,以及所有数据。我的问题是:
如何找出列表中的哪个选项,并使用同一XML文件中的正确数据填充另一个页面<div>
?
Web应用程序的想法是,作为用户,您可以通过科学名称或物种的家族搜索anuro(青蛙),当您单击它时,页面会显示有关该物种的更多信息。
再举一个例子,我将粘贴一份我想要完成的样本,填充样本数据:
<!-- PAGINA RESULTADO -->
<div data-role="page" id="resultados">
<div data-role="header" data-position="fixed">
<h1>eFrogs</h1>
<a data-rel="back" data-icon="back" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all">volver</a>
</div>
<div role="main" class="ui-content">
<!-- TITULO -->
<h3><center><i>Phyllomedusa Sauvagii</i></center></h3>
<!-- FOTO -->
<a href="#foto" data-rel="popup" data-position-to="window" data-transition="pop">
<img class="popphoto" style="margin-right:10px" src="img/phyllomedusa_sauvagii.jpg" alt="Phyllomedusa Sauvagii" width="100%"></a>
<div data-role="popup" id="foto" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">
Cerrar
</a>
<img class="popphoto" src="img/phyllomedusa_sauvagii.jpg" style="max-height:512px;" alt="Phyllomedusa Sauvagii">
</div>
<br><br>
<!-- GRILLA DE DATOS -->
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Nombre Común
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Rana Mono
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Familia
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Hyllidae
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
SubFamilia
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Phyllomedusinae
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Estado de Conservación
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Least Concern
</div>
</div>
</div>
<!-- DATOS EXTRA -->
<h4 class="ui-bar ui-bar-a">Distribución Geográfica</h4>
<div class="ui-body">
<p>Chacoan region of eastern Bolivia, northern Paraguay, Mato Grosso do Sul (Brazil), and northern Argentina.</p>
<p>Up to 1500 m</p>
</div>
<h4 class="ui-bar ui-bar-a">Hábitat y Ecología</h4>
<div class="ui-body">
<p>It occurs in the dry Chaco and is an arboreal species. It occurs on vegetation near temporary lagoons or ponds and the males call at night. They make a coarse leaf nest, filled with their glutinous egg-clutches which hangs over the water, the hatched tadpoles then drop in to the water below where they develop. It breeds only in the rainy season and is not tolerant of substantial habitat disturbance.</p>
</div>
</div><!-- /content -->
<!-- PIE DE PAGINA -->
<div data-role="footer" data-position="fixed">
<h4>Webapp en Construcción</h4>
</div>
</div>
上面的页面填充了样本数据。这个想法是,当您选择一个选项时,数据会使用正确的数据进行更新。 我希望你能理解这一切。谢谢你的帮助!
答案 0 :(得分:0)
我不确定我是否理解了所有内容,但您可以在列表项上收听“点击”事件:
$('li').on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
编辑:
当你在列表中生成一个项目时,你可以给它一个id来轻松地检索它:
<li id="anuro">...</li>
然后你可以添加事件监听器:
$('#anuro').on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
在您的情况下,代码可能如下所示:
var item = ('<li id="aruno"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>');
$('#lista').append(item);
item.on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
$("#lista").listview("refresh");
编辑2:
一旦你开始理解jquery,一切都变得简单。 下面我编辑了上面创建的部分代码,以替换页面中的照片:
item.on('click', function() {
$('.popphoto').attr('src', 'img/'+Foto);
});