category.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>category demo</title>
<script>
$(document).delegate("#catList", "pageshow",
function(e, data) {
console.log(e.target.baseURI) //make async request here and
fill catList page UL });
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>jQuery Mobile
1.4.2 Example</h2>
</div>
<div role="main"
class="ui-content" id="page-content">
<ul data-role="listview">
<li><a href="catlist.html?id=1">Category-
1</a></li>
<li><a href="catlist.html?id=2">Category-
2</a></li>
<li><a href="catlist.html?id=3">Category-
3</a></li>
<li><a href="catlist.html?id=4">Category-
4</a></li>
</ul>
</div>
</div>
</body>
</html>
catlist.html
<div data-role="page"
id="catList">
<div
data-role="header">
<h2>Category List</h2>
</div>
<div
role="main" class="ui-content"
id="page-content">
<ul
data-role="listview">
</ul>
</div>
</div>
Here you are listening to pageshow of categorylist page and make
async call and fill list.
I personally don't prefer this way. very much comfortable
with pagebeforechange event in these scenario.