I have a form submitted via jQuery ajax that suddenly, unexpectedly, started crashing while executing some queries in Chrome and Safari in OS X. I tested Firefox, Opera and iOS Safari and they all seem to be fully functional (however I can’t say that is 100% sure that the error seems random, but I tried ~ 10 requests in each browser without crashing).
Chrome says POST http://<site url>/wp-admin/admin-ajax.php net::ERR_EMPTY_RESPONSE in the console, and writing the response object in the console gives me Object {readyState: 0, responseText: "", status: 0, statusText: "error"} when the request fails, not very useful.
However, the full PHP script is executed regardless of whether the response says that it failed or failed. I know this because emails sent from the form are always delivered. In addition, when registering all incoming request headers in PHP, there is no difference between failed requests and successful ones.
I also checked the answers with bash $ curl ... and I can’t find the differences between the answers, even if I use a command that can be copied from the Chrome network tab (right-click on the query> Copy as cURL).
If I omitted one of the fields ("phone"), the error seems to disappear. But if I continue to press the submit button several times, the request will end up (after about 2-5 submissions) - even if the “phone” is full, the form data is identical for all requests.
There is no difference in response time between failed requests and subsequent ones. (i.e., I just got 1.11s on unsuccessful error and 1.16 on successful completion).
Code used to send: ( this.onSuccess and this.onError currently only logs query 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) });
I also found something about timeouts and caching issues in Chrome, so I tried to change it without changes:
$.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) });
The form looks like this (but with a lot of confusion):
<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>
Can anyone understand what might cause this? Or at least can give me a hint on how to proceed? Now I'm running out of ideas ...
Thanks in advance!
Update
Safari suddenly works fine ... Just Chrome that has problems. We didn’t make any changes to the code, it just magically started working.
Ps Of course, I know that it is very unlikely that random things happen "by accident" and that troubleshooting is most likely not systematic enough if that is the case, but in this case the errors really seem random.