jquery ajax GET request executing twice

Question

I have the following ajax request that is executed at a click of a button:

<a href="javascript:test()"><img src="css/images/test.png"></a>

function test(){
    console.debug("*");

    $.ajax({
        type: "GET",
        dataType: "json",
        url: '/path/to/url',
        success: function(data){
            console.debug("**");
        }, 
        error: function(jqXHR, status, error){
            console.debug("*** " + status + " : " + error + " : " + jqXHR.status);
        },
        cache: false
    });
}

The request response takes approximately 30 seconds to return. However, the request is received and executed by the server twice as can be seen by the apache logs. The timestamp of the requests are 30 seconds apart but the request is identical (e.g ?_=1363692320782). The click response function is called once and the error callback is invoked once (exactly 60 seconds after initial request), although the apache response is a 200.

This problem has been reproduced in a Samsung Galaxy S2, android version 2.3.5 in a phonegap application.

UPDATE - adding Apache log entries from comment below

1.2.3.4 - - [19/Mar/2013:14:07:59 +0000] "GET /pcapi/records/dropbox/08342hjg9gpqm7g/?_=1363702072225 HTTP/1.1" 200 11139 "-" "Mozilla/5.0 (Linux; U; Android 2.3.5; en-gb; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
1.2.3.4 - - [19/Mar/2013:14:08:29 +0000] "GET /pcapi/records/dropbox/08342hjg9gpqm7g/?_=1363702072225 HTTP/1.1" 200 11139 "-" "Mozilla/5.0 (Linux; U; Android 2.3.5; en-gb; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

UPDATE - adb logcat

I/Web Console(16747): * at file:///android_asset/www/js/mobile.js:1769
I/Web Console(16747): *** error : : 0 at file:///android_asset/www/js/mobile.js:1779

UPDATE - TCP/IP monitor

Putting the requests through a TCP/IP monitor shows both requests being sent with a 200 response for both.

Answer 1

I hit this exact problem with my app running on Android 2.3.5. I could only conclude that the webview was retrying the request after a timeout. I could find no way to affect the duration of the timeout.

In the end, I rewrote the code such that the initial request spun off an asynch process on the server and returned immediately. Then, from a setTimer on the page, I would check the status of the server process (again, returning immediately). When the status was "complete", the page would move along to the next step.

I hope that helps. I certainly understand your frustration with this. I spent a couple of days myself fighting with it.

Edit: This may have been the article that sent me in the direction of an asynchronous solution. I believe the problem stated here is one and the same:

XmlHttpRequest double posting issue in Android

Answer 2

If your URL path defined here url: '/path/to/url' is to a folder and not a specific file try adding a trailing slash like this url: '/path/to/url/'.

What happens when a file is not specified is that the Apache web server sends a 301 redirect to the AJAX client with a new URL (with the trailing slash), so the client issues a new request to the proper URL.

See a similar question posted here: jQuery $.ajax() executed twice?

See the Apache doc reference here: http://httpd.apache.org/docs/2.0/mod/mod_dir.html#directoryslash

Answer 3

What about using beforeSend: and complete: AND .ajaxSend() + ajaxSuccess(), also try with cache: true

$(document).ajaxSend(function (event, jqxhr, settings) {
    console.log("triggered ajaxSend !");

    if ( submission_active == true ) {
        jqxhr.abort();
    }

    submission_active = true;
});

$(document).ajaxSuccess(function (event, xhr, settings) {
    console.log("triggered ajaxSuccess !");
    submission_active = false;
});

$.ajax({
    type: "GET",
    dataType: "json",
    timeout: 30000,
    cache: false,
    url: '/path/to/url',
    success: function(data){
        console.debug("**");
    }, 
    beforeSend: function(xhr, opts){
        if(submission_active == true){
            xhr.abort();
        }

        submission_active = true;
    },
    complete: function(){
        submission_active = false;
    }
    error: function(jqXHR, status, error){
        console.debug("*** " + status + " : " + error);
    }
});

Answer 4

Click event is being triggered twice. The below code fixes this issue.

$('.selector').unbind('click').bind('click', function () {
 //...
 // Ajax code
 //...
});