CODEWITHSUNDEEP
javascriptjqueryajaxwordpressgoogle-chrome
Johan Palmfjord
Johan Palmfjord

Reputation: 681

jQuery ajax fails *sometimes* (ERR_EMPTY_RESPONSE) in Chrome and Safari

I have a form that is submitted via jQuery ajax that suddenly, out of the blue, started failing on some requests in Chrome and Safari on OS X. I've tested Firefox, Opera and iOS Safari and they all seem to work totally fine (however I can't say I'm 100% sure of this as the error seems to appear randomly but I tried ~10 requests in each browser with no failures).

Chrome says POST http://<site url>/wp-admin/admin-ajax.php net::ERR_EMPTY_RESPONSE in the console, and logging the response object in the console gives me Object {readyState: 0, responseText: "", status: 0, statusText: "error"} when the request fails, not very helpful.

However the full PHP script executes no matter whether the response says it failed or succeeded. I know this because the emails that are sent from the form always gets delivered. Also, when logging all incoming request headers in PHP there's no difference between the failing requests and the successful ones.

I've also checked the responses with bash $ curl ... and cannot find any differences between the responses, even if I use the command that one can copy from Chrome's network tab (right click on request > Copy as cURL).

If I omit one of the fields ("phone") the error seems to go away. But if I keep clicking the submit button a few times the request succeeds eventually (after approx 2-5 submits) - even though "phone" is filled out the form data is identical on all requests.

There is no difference in response time between failing requests and succeeding ones. (i.e. i just got 1.11s on a failed and 1.16 on a successful).

Code used for the submission: (this.onSuccess and this.onError currently just logs the request results)

$.ajax('<url>', {
    action: '<url>',
    method: 'POST',
    data: data, // Serialized form
    success: $.proxy(this.onSuccess, this), // currently just console_logs the response object
    error: $.proxy(this.onError, this), // currently just console_logs the response object
    always: $.proxy(this.always, this)
});

Also I found something about timeouts and issues with cacheing in Chrome so I tried changing it this with no change:

$.ajax('<url>', {
    action: '<url>',
    timeout:9999,
    async:true,
    cache:false,
    method: 'POST',
    data: data, // Serialized form
    success: $.proxy(this.onSuccess, this), // currently just console_logs the response object
    error: $.proxy(this.onError, this), // currently just console_logs the response object
    always: $.proxy(this.always, this)
});

Form looks like this (but with a lot of styling fuzz):

<form action="#ww_main" class="ajax-form">
    <input type="text" data-min-length="3" name="main[name]" id="name" required="">
    <input type="email" name="main[email]" id="email" required="">
    <input type="tel" name="main[phone]" id="phone">
    <textarea name="main[message]" data-min-length="5" id="message" required=""></textarea>
    <button type="submit">Skicka</button>
</form>

Does anyone have any idea what could cause this? Or at least can give me a hint on how to continue? I'm running out of ideas now...

Thanks in advance!

Update

Safari suddenly works fine... Just Chrome that has issues. Haven't made any changes to the code, it just magically started working.

P.s. I do of course know it's very unlikely stuff happens "randomly" and that the troubleshooting most likely hasn't been made systematic enough if it seems so, but in this case the errors truly seem to appear at random.

Upvotes: 4

Views: 6008

Answers (3)

Johan Palmfjord
Johan Palmfjord

Reputation: 681

This was solved when we updated from PHP 5.4 to 5.6 - somewhere there seems to be some kind of bug in PHP. Hope it helps someone!

Upvotes: 1

Hasan Wajahat
Hasan Wajahat

Reputation: 1817

You should try increasing memory_limit in the php.ini file of the server or even disabling it at least for testing.

Upvotes: 0

Johan Palmfjord
Johan Palmfjord

Reputation: 681

FYI: I ended up hacking around this, checking if the response object matched this error and triggered the onSuccess when this error was found. Uuuuugly but it did the trick.

Upvotes: 0

Related Questions