I am developing an application using jQuery
mobile 1.1.0 RC1 and phonegap 1.5.0
I have a single HTML page which contains all the pages in it as a div(through data-role="page")
here is my code
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery
mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
function page1(){
$.
mobile.changePage("#page2", {
transition : "slide"
});
}
function page2(){
$.
mobile.changePage("#page1", {
transition : "slide"
});
}
$("#page1").live("pageshow", function(e) {
$.ajax({
type : 'GET',
cache : false,
url : "http://192.168.1.198:9051/something.xml"
+ "?time=" + Date.now(),
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
console.log("Success Page1");
},
error : function(xhr) {
}
});
});
$("#page2").live("pageshow", function(e) {
$.ajax({
type : 'GET',
cache : false,
url : "http://192.168.1.198:9051/something.xml"
+ "?time=" + Date.now(),
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
console.log("Success Page2");
},
error : function(xhr) {
}
});
});
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content">
<input type="text" name="page1GetTime" id="page1GetTime" value="" /><a
href="#" data-role="button" onclick="page1()" id="gotopage2"> Go to Page 2 </a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content">
<input type="text" name="page2GetTime" id="page2GetTime" value="" /><a
href="#" data-role="button" onclick="page2()" id="gotopage1">Go to Page 1</a>
</div>
</div>
</body>
Now when i click to "Go to page2" then page2 will be shown along with one ajax request .. If i keep on moving from one page to another then a ajax request is made.. This request stops responding after 4 to 5 request... Why is it happening?
