I am trying to add two panels to my site one (myPanel) that opens when i swipe left to right and another that opens when swiping from right to left(myPanel2). I did that in a sense but I am having another issue. In panel1 and two I need to add links that when clicked will go to the corresponding pages. It seems to work but, instead of loading the page it does an ajax get of the page. Also after i click once on a link clicking on a new link does nothing. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<title>mobile app</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
<script src="js/modernizr.custom.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel" data-display="overlay" data-ajax="false">
<h2><img src="images/logo.png" alt="" title="" /></h2>
<ul>
<li class="home"><a href="home.html" class="close-panel">Home</a></li>
<li class="news"><a href="news.html" class="close-panel">News</a></li>
</ul>
</div>
<div data-role="panel" id="myPanel2" data-position="right" data-display="overlay">
<h2>Panel Header</h2>
<p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
</div>
<div data-role="header">
<h1>Page Header</h1>
<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel left</a>
<a href="#myPanel2" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel right</a>
</div>
<div data-role="main" class="ui-content">
<div class="homepage-banner">
<ul id="home_ads">
<li><span><img src="images/home-logo.png" /></span> </li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Page Footer</h1>
</div>
</div>
</body>
</html>
I assumed data-ajax="false" would do the trick but it isn't ideas?
