jQuery ajax - no headers or result showing in console

Question

I am working on modifications to a web app. The production app can be seen at http://finder.passaicschools.org. We are making changes in the district and I am updating the app to accommodate the changes.

I have three environments. Development (windows 7), test (Ubuntu Linux Server) and production (also Linux but it is a host so I am not sure which version).

I made my changes locally and everything works great.

I uploaded the new code and database to my test server and the Find feature on the main page doesn't work.

When the user clicks find, the entered parameters are supposed to be sent to the server which processes the request and then sends the results back. I should see the headers, parameters and results in the console window. I see it fine in development but all I am seeing in test is that the call is made but all the detail about the call is blank (headers, parameters and results).

But wait, it gets better. I threw an error into the controller (just to be sure that it was running) and then it shows me everything in test,

Here's my ajax call()

function doSearch(cFullAddress, cGrade){
    $.ajax({
        url: '/find/doSearch',
        data: {"address":cFullAddress, "gradelevel": cGrade},
        method: "post",
        success: function(data){
                    var result = $.parseJSON(data);
                    clearMarkers();

                    if (result.status=="NOROWS"){
                        var lcHTML = $("#leftcolumn").html();

                        lcHTML = lcHTML + "<br /><br /><h2>We're sorry but we could not find " +
                                "a school matching your address and grade criteria. Please call the " +
                                "district at 973-???-???? for more information.</h2>";
                        $("#leftcolumn").html(lcHTML);
                    }else{

                        var numSchools = result.data.length; 

                        addMarker(result.data[0].nLat, result.data[0].nLng, result.data[0].cName);
                        if(numSchools == 2){
                            addMarker(result.data[1].nLat, result.data[1].nLng, result.data[1].cName);
                        }

                        var lcHTML = $("#leftcolumn").html();
                        var baseURL = $("#hidBaseURL").val();

                        lcHTML = lcHTML + "<br /><br /><hr style=\"width:50%;\" />" + 
                                "<p align=\"center\"><span style=\"color: #002f87;\">" + 
                                "<strong>YOUR SCHOOL</strong></span></p>" + 
                                "<hr style=\"width:50%;\" />" +  
                                "<a style=\"color: #3a3a3a;font-weight:bold;\" href=\"" + baseURL + 
                                result.data[0].cPage + "/\">" + 
                                result.data[0].cName + "</a><br />" + 
                                 result.data[0].cAddress + "<br />" +
                                 result.data[0].cCity + ", " + result.data[0].cState + " " + 
                                 result.data[0].cZip + "<br />" + 
                                 "Phone number: " + result.data[0].cPhone;

                        if(numSchools == 2){
                            lcHTML = lcHTML + "<br /><br />" + 
                                    "<a style=\"color: #3a3a3a;font-weight:bold;\" href=\"" + baseURL + 
                                    result.data[1].cPage + "/\">" + 
                                    result.data[1].cName + "</a><br />" + 
                                     result.data[1].cAddress + "<br />" +
                                     result.data[1].cCity + ", " + result.data[1].cState + " " + 
                                     result.data[1].cZip + "<br />" + 
                                     "Phone number: " + result.data[1].cPhone;
                        }

                        $("#leftcolumn").html(lcHTML);
                        centerMap(result.data[0].nLat, result.data[0].nLng);
                    }

                },
        });
}

Any assistance would be appreciated.

What is causing this? It's not working and I can't even begin to think where to look for a cause to this... — Menachem Bazian, May 03 '18 at 19:15
what chrome console> network tab says about this request for different environments ? — Kamil Kiełczewski, May 03 '18 at 19:16
OK, first clue: Status (failed), type xhr, net::ERR_CONTENT_DECODING_FAILED. — Menachem Bazian, May 03 '18 at 19:26
give screenshots with network-tab or some info. What is the RESPONSE body of that error ? (probably serwer return error or body in wrong format) — Kamil Kiełczewski, May 03 '18 at 19:27
SOLVED! The problem was that I turned on compression in my php framework. I guess the test server didn't like that. I turned it off and it now works great! Too bad FireFox didn't tell me what Chrome did! — Menachem Bazian, May 03 '18 at 19:29

score 0 · Accepted Answer · answered May 07 '18 at 18:14

The problem was solved.

I googled net::ERR_CONTENT_DECODING_FAILED and found an article (Error 330 (net::ERR_CONTENT_DECODING_FAILED):) that says it can happen when the HTML header says that it is compressed but compression is not enabled on the server.

I had compression enabled in DEV but I guess I didn't have it enabled on TEST. CodeIgniter (the php framework I use) has a compression setting and I had it turned on. I turned it off and everything worked fine after that in all browsers.

What I don't get is why FireFox didn't give me some kind of error message on this. Score one for Chrome, I guess.

jQuery ajax - no headers or result showing in console

1 Answers1