Ajax call not working as expected in Firefox

Ajax call not working as expected in Firefox

Okay, I had this peculiar problem of my web form updating the relevant tables when being called from Google Chrome and not doing so, when the call was made through Firefox.

The form went into sleep and did not respond after the Submit button was clicked. It looked as if the Ajax call was in indefinite loop in Mozilla Firefox.

As we went digging for reasons that this was happening, we realised that Firefox is strict about how data has to be sent to it. For the ajax call to work as expected, the ajax code needs to follow a certain format.

Google Chrome is someone who tries to make sense out of the data and so, the code got accepted by Chrome.

Ultimately, we understand that what we need to return from a php program, which is being called through an ajax request, is content preceded by a header, which indicates the type of content that follows.

It could be any of these types as defined below.

Header Content-type: Common examples:
application/json
application/x-www-form-urlencoded
application/pdf
multipart/form-data
text/html

text/plain

image/png
image/jpeg

image/gif

So, at the end of your php code, you will  have something like what you are seeing below. In the first example, the returned value is a json content, while the second example returns a plain text message in response to the Ajax request.

Php program returning JSON in response to an Ajax call, Example 1:

    header('Content-type: application/json');
    echo json_encode($response_array);
?>

Php program returning text value to Ajax call, Example 2:

    header('Content-type: text/plain');
    echo 'success';
?>

Finding at the end of the exercise: Firefox expects that the ajax return value, json or otherwise, be preceded by a header. This has to be strictly followed for our ajax call to work correctly.