Hi ,
I am facing one problem in jquery mobile code , please help me.
My problem in persistent navbar. I have two page , In first page don't have navbar. But second page navbar is present and I am redirect from first page to second page . But unfortunately navbar not working in second page.
If I run individually second page persistent navbar working fine.
I paste my code here:
Page :: 1
First.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<script>
$.mobile.changePage('Second.html', { transition: "slide"
},false);
</div>
</script></body>
</html>
Second.html ::-
<body>
<div data-role="page" id="one">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<p>Content 1</p>
</div>
<div data-theme="c" data-role="footer" data-id="foo1" data-position="fixed">
<div data-role='navbar'>
<ul>
<li id="tab1"><a href='#one' class="ui-btn-active ui-state-persist"'>Index</a></li>
<li id="tab2"><a href='#'two data-href='#second'>Second</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="two">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
<p>contet 2</p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" data-id="foo1" >
<div data-role='navbar'>
<ul >
<li id="tab1"><a href='#one' >Index</a></li>
<li id="tab2"><a href='#two' class="ui-btn-active ui-state-persist">Second</a></li>
</ul>
</div>
</div>
</div>
</body>