Dynamic Listview to Details page (Jquery Mobile)
i have succeeded in listing my data from mysql database in JQM.
i want to link the list item to its details.
Therefore when there is a click on a list, a new page with the data from the list is displayed.
I dont know how to do it
Heres what i have now : but the link i have isnt working, guess i am missing something.
heres the link on js fiddle http://jsfiddle.net/8WU39/16/
<script type= text/javascript>
$('#seyzListPage').live('pageshow', function(){
$.ajax({
url: "data.php",
dataType: 'json',
success: function(json_results){
listItems = $('#seyzList').find('ul');
$.each(json_results.rows, function(key) {
html = '<li <h3><a href="index1.html?id=' + [json_results.rows[key].airp_id] +'"rel="external">'+json_results.rows[key].airport_code+'</h3>';
html += '<p><br> Aiport name: '+json_results.rows[key].airport_name+'</p></a></li>';
listItems.append(html);
});
// Need to refresh list after AJAX call
$('#seyzList ul').listview('refresh');
$.mobile.pageLoading(true);
}
});
});
</script>
<div data-role="page" id="seyzListPage">
<div data-role="header" id="header">
<h1>Airports</h1>
</div>
<div data-role="content" id="seyzList">
<ul data-role="listview" data-inset="true" data-filter="true"><开发者_如何学Go/ul>
</div>
<div data-role="footer" data-postion="fixed">
<h3>Footer</h3>
</div>
</div>
What do i do to get the list linked to its data on another html page.
I had a very similar problem and found a fix with a simple plugin. It's called jqm.page.params.js
and can be found here. Implementation was very easy. Added the plugin file to my root directory and then included it at the bottom of my index.html page.
In your js file, you then just want to place
if ($.mobile.pageData && $.mobile.pageData.color){
var color = $.mobile.pageData.color;
}
at the top of your beforepageshow event to capture the variables tacked on to the link. Replace 'color' with the variables you are looking for.
精彩评论