I am new to Jquery mobile. Following is the first simple code that I am trying out. I see that when navigating from the listview on the 2nd page (groupcalls) to the detail view page (callview) the URL remains cached to the first list selection. even though the HREF (on hover) displays the right values (?p=1 or 2 or 3), on clicking it navigates to the last selection.
What am I missing ? - Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>First Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home" >
<div data-role="header" data-position="inline" data-theme="b" >
<h1>First Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="index.html#groupcalls">Total Calls<span id="grpcount" class="ui-li-count">2</span></a></li>
</ul>
</div>
</div>
<div data-role="page" id="groupcalls">
<div data-role="header" data-position="inline" data-theme="b" >
<h1>First Mobile</h1>
</div>
<div data-role="content">
<ul data-role='listview'>
<li><a href="#callview?p=1">item one</a></li>
<li><a href="#callview?p=2">item two</a></li>
<li><a href="#callview?p=3">item three</a></li>
<li><a href="#callview?p=4">item four</a></li>
</ul>
</div>
</div>
<div data-role="page" id="callview">
view item <x>
</div>
</body>
</html>