Jquery mobile ajax request not working after 4-5 request is made in Android

Question

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?

Do you get an error or anything? It could be that your page becomes to 'heavy'. — shanabus
@shanabus No error... If it becomes heavy then how to unload stuff to make it light...How to do it? — coderslay

shanabus shanabus · Accepted Answer · 2012-04-02T20:37:27

If your pages become so heavy that ajax requests timeout or stop working, you may want to separate them in to different actual pages. If they still perform poorly, you can easily force ajax off to test if that is the issue.

data-ajax="false"

Also, does this limitation change from one mobile device to the next or on a desktop browser? Because your ajax becomes unresponsive at "4 or 5", it makes me think its a memory issue.

Jquery mobile ajax request not working after 4-5 request is made in Android

4 Answers