I am new to Jquery mobile and Jquery. I am trying to develop a mobile application. The thing is that I have a result page which displays the result of products, clicking on any product will take you to a description page about that product. I have navbar in the middle of the page with 5 buttons , each links to a different page. I want to load respective pages in the div block below the navbar. I have used jquery document.ready function which works fine but when I click on a particular product on a result page it takes me to the description page but the dynamic loading happens only after I reload that description page. Any suggestion as to improve or better methodology ?
Result page.
<div data-role="page" id="page">
<div data-role="header" data-theme="a">
<a href="#mypanel" data-role="button" data-icon="grid">Menu</a> <!--Top right MENU button -->
<h1> Results </h1>
</div> <!-- end of the header -->
<div data-role="content"> <!-- Start of the content -->
<form method="post">
<ul data-role="listview">
<li>
<a href="wine.php?wid=1">
<img src="images/images.jpg" width="100" height="100" style="padding:10px;" />
<h1> Wine 1</h1>
<p style="font-style:italic"> This is wine 1 </p>
<h3> 1962</h3>
</a>
</li>
<li><a href="wine.php?wid=2" data-transition="slide"><img src="images/images (1).jpg" height="100" width="100" style="padding:10px;"/><h1> Wine 2</h1>
<p> This is wine 2 </p>
<h3> 1962</h3>
</a>
</li>
<li><a href="wine.php?wid=3"><img src="images/images.jpg" height="100" width="100" style="padding:10px;" /><h1> Wine 3</h1>
<p> This is wine 3 </p>
<h3> 1962</h3>
</a>
</li>
<li><a href="wine.php?wid=4"><img src="images/images.jpg" height="100" width="100" style="padding:10px;" /><h1> Wine 4</h1>
<p> This is wine 4 </p>
<h3> 1962</h3>
</a>
</li>
<li><a href="wine.php?wid=4"><img src="images/images (1).jpg" height="100" width="100" style="padding:10px;" /><h1> Wine 5</h1>
<p> This is wine 5 </p>
<h3> 1962</h3>
</a>
</ul>
</li>
</div>
Description page:
<body>
<div id="result" data-role="page">
<div data-role="header">
<a href="#mypanel" data-role="button" data-icon="grid">Menu</a> <!--Top right MENU button -->
<h1> Wine Description </h1>
</div>
<div data-role="content" id="swipe">
<?php while($row = mysql_fetch_object($result))
{
echo '<h1>'.$row->wine_name.'</h1>';
echo '<p>'.$row->wine_id.'</p>';
echo '<p>'.$row->wine_desc.'</p>';
echo '<p><i>'.$row->year.'</i></p>';
}
?>
</div>
<div data-role="navbar" style="background-color:#000; color:#FFDFFF; height:50px; padding:2px 2px 2px 2px">
<ul id="menu">
<li><a id="description"> Description</a></li>
<li><a id="producer" > Producer</a> </li>
<li><a id="journal">Journal </a></li>
<li><a id="rating"> Ratings </a></li>
<li><a id="mediaRating"> Media Ratings </a></li>
</ul>
</div>
<div id="content"></div>
.js file :
$(document).ready(function(e) {
$('#content').load('description.php');
$('ul#menu li a').click(function(e){
// alert('U have reached the click function')
var page = $(this).attr('id');
// alert("Hello World "+page);
$('#content').load(page+'.php');
});
});
Assume all the dependencies are loaded. I am using Jquery Mobile 1.3.1 , Jquery 1.10
