jQuery ajax fails in Samsung phone

Question

I have encountered a peculiar problem using jQuery (3.3) ajax. I have simplified the code to bare minimum and still can't understand why it is happening.

From an HTML form I capture the 'Submit' and call a PHP script using ajax. The ajax call is successful if I use Chrome or Edge on a (Win10) laptop or Chrome on an older Samsung Note II (running Android 4.x), or Safari on iPhone, or two other Android phones, but it fails (hits the error clause) using either Chrome or Samsung stock browser on a Samsung A5 phone. All the HTML/JavaScript/PHP are on the same server and same domain so no cross domain scripting.

JavaScript:

$(document).on("submit", function(ev) {
 alert ('submit pressed');
 ev.preventDefault();
 var destination = encodeURI ("https://example.com/contact.php");
 
 var datastring = "test";
 
 $.ajax({
  type: 'POST',
  url: destination,
  data: datastring,
  success: function (result) {
   alert ('success');
  },
  error: function(req, status, err){
   alert ('error');
  },
  complete: function(result){
   alert ('complete');
  }
 });
});

PHP - I have taken everything out in the cotnact.php:

<? php
exit(0)
?>

I get 3 alerts if I use laptop, iPhone, or 3 other Android phones:

1. submit pressed
2. success
3. complete

However instead of success I get error in the Samsung A5:

1. submit pressed
2. error
3. complete

By the way, although the call in the A5 phone hits the "error" clause, the PHP code is indeed gets executed (I had the whole script working by writing to files, sending email notifications, ... but removed everything to simplify)

Does anybody have any idea why this is happening and more importantly how can anybody be sure that his/her code is working on any device when the code is at a such basic level without testing every and each device?

Thank you in advance if you can shed any light on this and point me to what I am missing in either my code, setup, or understanding.

Answer 1

From this data, I cant figure it out. Please use below code to assume what actually happened. Use the following function to decode error and let me know that output, instead of simple 'error' message.

function formatErrorMessage(jqXHR, exception) {

if (jqXHR.status === 0) {
    return ('Not connected.\nPlease verify your network connection.[Error Code=0]');
}
else if (jqXHR.status == 400) {
    return ("Server understood the request but request content was invalid.[Error Code=400]");
}
else if (jqXHR.status == 401) {
    return ('Unauthorised access. [Error Code=401].');
}
else if (jqXHR.status == 403) {
    return ("Forbidden resouce can't be accessed.[Error Code=403]");
}
else if (jqXHR.status == 404) {
    return ('The requested page not found. [Error Code=404]');
} else if (jqXHR.status == 500) {
    return ('Internal Server Error [Error Code=500].');

}
else if (jqXHR.status == 503) {
    return ('Service Unavailable. [Error Code=503]');
}

else if (exception === 'parsererror') {
    return ('Requested JSON parse failed.');
} else if (exception === 'timeout') {
    return ('Time out error.');
} else if (exception === 'abort') {
    return ('Ajax request aborted.');
} else {
    return ('Uncaught Error.\n' + jqXHR.responseText);
}
}

Then change your ajax call's error handler like this,

   error: function(req, status, err){
        alert (formatErrorMessage(req, err));
    },

And let me know waht the output say in samsung set.

Answer 2

Without knowlage of the php code behind this application I can tell you that you should return the status 200 to join the success function.
Also you should avoid caching in this case (at leats for development). And inspect the response status of your php script. Jquery doesn't fool you on randomly taking suucess or error functions, there is a reason in response handling.
For references you can have a look at jQuery docs.
You should remember the differences of mobile device browsers. Chrome does behave different as firefox if you are watching the js compilation and execution.

Also you can use tools like browserstack for testing different mobile devices in layout and js functionality.

Beside: In my opinion frontend devs (yes, js is frontend and CAN be also backend) always have to test on multiple devices/browsers or at least emulate them.