jQuery $.ajax failing silently, no error messages, and server responded with 200 OK

Question

I am about to do my head in over this problem. I am using very simple jQuery ajax calls to get values from a database and populate a few select elements with the values, all returned as JSON. It works seamlessly for me on most browsers, however the client is reporting that neither them nor their clients are seeing the result.

I added some Console.log() commands along the way to make sure the code was executing, and it was. Sometimes the ajax GET to the URL in question works, other times is STILL returns 200 OK but the code simply does not execute further, and NO ajax error messages are shown in the error callback.

Here is the code I am using, can someone spot something obvious that may result in some browsers choking? If so, I'd be grateful if you could point it out:

        var $j = jQuery.noConflict(true);
        $j(document).ready(function(){
            //console.log("jQuery has loaded");
            //console.log("attempting to load country list via AJAX call now");
            $j.ajax({
                url: 'http://www.topplaces.co.za/templates/seb_one/positions/search_establishments_filter/search/db.php?q=countries&rand='+Math.random(),
                success: function(data){
                    //console.log("Successfully got country list, going to populate the dropdown now");
                    if(data.length){
                        $j("#country").children("option:not(:first)").remove();
                        $j("#country").attr("disabled", false);
                        $j.each(data, function(resultIndex, result){
                            var o = new Option();
                            $j(o).html(result.country).val(result.country);
                            $j("#country").append(o);
                        })
                        //console.log("Country list should be populated now?");
                    }
                },
                error: function (xhr, ajaxOptions, thrownError){
                    //console.log(xhr.responseText);
                    console.log(thrownError);   
                },
                dataType: 'json',
                cache: false
            })

            $j("#country").live('change', function(){
                var id = $j(this).val();
                if(id == ""){
                    $j("#province").attr("disabled", "disabled");
                    $j("#town").attr("disabled", "disabled");
                    return false;
                }
                $j.ajax({
                    url: 'http://www.topplaces.co.za/templates/seb_one/positions/search_establishments_filter/search/db.php?q=provinces&c='+id+'&rand='+Math.random(),
                    success: function(data){
                    if(data.length){
                        $j("#province").children("option:not(:first)").remove();
                        $j("#province").attr("disabled", false);
                        $j.each(data, function(resultIndex, result){
                            var o = new Option();
                            $j(o).html(result.province).val(result.province);
                            $j("#province").append(o);
                        })
                    }
                },
                dataType: 'json',
                cache: false
                })
            });

            $j("#province").live('change', function(){
                var id = $j(this).val();
                if(id == ""){
                    $j("#town").attr("disabled", "disabled");
                    return false;
                }
                $j.ajax({
                    url: 'http://www.topplaces.co.za/templates/seb_one/positions/search_establishments_filter/search/db.php?q=towns&p='+id+'&rand='+Math.random(),
                    success: function(data){
                    if(data.length){
                        $j("#town").children("option:not(:first)").remove();
                        $j("#town").attr("disabled", false);
                        $j.each(data, function(resultIndex, result){
                            var o = new Option();
                            $j(o).html(result.town).val(result.town);
                            $j("#town").append(o);
                        })
                    }
                },
                dataType: 'json',
                cache: false
                })
            });

        })

I have commented out the Consol.log commands for the pure fact that the client was receiving error messages on IE as there is no console.

EDIT: I failed to mention that this a same domain request and therefore obeys the Same Origin Policy

The full site is here: http://www.topplaces.co.za/ On the right is a dynamic select group that starts with country and initiates AJAX calls until a Province is selected. The issue, a lot of people say that Country is no loading for them...

Kind regards, Simon

Answer 1

Check if your server application always returns valid JSON object, otherwise it will not be accepted because you set dataType: 'json'. In this case, error function will be executed instead of success.

Remove dataType parameter and see what happens, try to parse incoming data with $.parseJSON() - it will throw an exception if you JSON is invalid.

Answer 2

I tried your site but no province is loading. The Json is empty. I tried accesing the php directly and it returns empty as well. Did you check your script?

URL Called http://www.topplaces.co.za/templates/seb_one/positions/search_establishments_filter/search/db.php?q=provinces&c=Zambia&rand=0.12686952343210578&_=1335360594228

This are the params is see:

q:provinces
c:Zambia
rand:0.12686952343210578
_:1335360594228

Json Result: []

It's really random so I bet it's the php script not returning the json.