无法在jquery mobile中加载动态列表视图 [英] unable to load dynamic listview in jquery mobile
问题描述
我已根据数据库创建动态列表视图但问题是加载列表视图我必须再次刷新页面。
I have create dynamic listview based on database but the problem is to load the listview i have to refresh the page again.
例如，
页面A.html有一个按钮，页面B.html有一个列表视图
Page A.html has a button and Page B.html has a listview
当我点击页面A内的按钮时.html页面B.html加载，但列表视图
不可见，当我再次刷新B.html时，列表视图加载。
when i click on button which is inside page A.html page B.html loads but the listview is not visible and when i refresh the B.html again then the listview loads.
代码页面A即index.html 点击findme页面B加载
Code of page A i.e. index.html when click on findme page B loads
<div data-role="content">
<p>
<a href="findme.html" id="findMeBtn" data-role="button" data-icon="delete">Find Me</a>
<a href="index.html" data-role="button" data-icon="delete">Fingle Hunts Basic</a>
<a href="index.html" data-role="button" data-icon="delete">Communicator</a>
</p>
<p>
<div id="action">
<div id="loading-icon"></div>
<div id="msg"></div>
</div>
</p>
</div><!-- /content -->
Page B iefindme.html的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Find Me</title>
<link rel="stylesheet" type="text/css" href="style/jquery.mobile.css"/>
<link rel="stylesheet" type="text/css" href="style/main.css"/>
</head>
<body>
<div data-role="page" id="findme">
<div data-role="header" data-theme="b">
<a href="index.html" data-icon="back">Back</a>
<h1>VisitFingal</h1>
</div><!-- /header -->
<div data-role="content" >
<center>
<div class="vf-nav-view vf-button-panel" >
<div data-role="controlgroup" data-type="horizontal" data-fullscreen="true" >
<a href="index.html" data-role="button" style="width:30%;" data-theme="b">List</a>
<a href="index.html" data-role="button" style="width:30%;" data-theme="b">Map</a>
</div>
</div>
</center>
<div id="findMeListView">
</div>
</div><!-- End of FindMe Page -->
<div data-role="page" id="details">
<div data-role="header"><h1>Details</h1></div>
<div data-role="content"></div>
</div>
<div data-role="footer" data-theme="b" data-id="mainfoot" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="findme.html" class="ui-btn-active ui-state-persist">Find Me</a></li>
<li><a href="#">Communicatior</a></li>
<li><a href="#">Like</a></li>
<li><a href="#">Favourates</a></li>
</ul>
</div>
</div><!-- /footer -->
</div>
</body>
<script src="js/jquery-1.6.3.min.js" type="application/javascript"></script>
<script src="js/jquery.mobile.js" type="application/javascript"></script>
<script type="application/javascript">
$(document).bind( "pagebeforechange", function( e, data ) {
$.getJSON('getData.php', function(data) {
var items = [];
$page = $("#findme");
$content = $page.find("#findMeListView" );
var listViewData='<ul data-role="listview" data-filter="true" data-inset="true" data-theme="c" >';
for (var i=0; i <data.length;i++)
{
listViewData += '<li><a href="details.html?id='+data[i].id+'"><img height="95" width="95" src="'+data[i].url+'" /><h3>'+data[i].name+'</h3></li>';
}
listViewData+='</ul>';
$content.html(listViewData);
$content.find( ":jqmData(role=listview)" ).listview();
});
});
</script>
</html>
推荐答案
当您使用这样的多页模板时从页面A到页面B单击时，JS将被忽略。这是因为jQuery Mobile AJAX链接仅从新页面中提取第一个 data-role =page 元素，将它附加到当前DOM，您可以想象这会忽略 data-role =page 元素之外的任何代码。
When you use a multi-page template like this the JS will be ignored when you click from page A to page B. This is because jQuery Mobile AJAX linking pulls just the first data-role="page element from the new page and appends it to the current DOM, as you can imagine this ignores any code outside the data-role="page element.
两个修正：
-
将
的JavaScript代码放在第B页直接在data-role =page元素中，以便在jQuery Mobile对页面进行AJAX加载时对其进行解析。
Put the JavaScript code for
page Bdirectly in thedata-role="pageelement so it will be parsed when jQuery Mobile does an AJAX load of the page.
将您网站的所有代码放入一个JS包含文件中，并将其包含在每个页面的< head> 中;这样所有无论用户是刷新还是深入链接到网站以及他们何时使用jQuery Mobile的AJAX链接进行导航，您网站的代码都将可用。这是我的偏好ed方法。
Put all the code for your site into a single JS include file and include it in the <head> of every page; this way all the code for your site will be available whether the user refreshes or deep-links into the site and when they navigate around using jQuery Mobile's AJAX linking. This is my preferred method.
这篇关于无法在jquery mobile中加载动态列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
