Unable to retrieve successfully return JSON data from Ajax call

Question

I have a weird problem with trying to retrieve Ajax data from my PHP server. When I select a country from the drop down menu the country_id is logged in the console and the data is shown in the console as well. However, for some reason if I try to alert the returned data within the success function I get nothing. In fact, if I try to alert anything within the success function it does not show. Is there something small that I am missing? My code is below. Thanks in advance.

$("#country_id").change(function() {
    var country_id = $(this).val();
    console.log(country_id);
    $.ajax({
        type: 'POST',
        url: 'register/load-zones',
        data: {country_id: country_id},
        beforeSend: function() {
            // $('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
            },
        success: function(zones) {
            console.log(zones);
            var zoneSelect = $('#zone_id');
            zoneSelect.empty();
            zoneSelect.append($('<option/>').attr('value', '').text('Select State'));
            $.each(zones, function (index, zone) {
                zoneSelect.append($('<option/>').attr('value', zone.zone_id).text(zone.name));
            });
        },
        error: function() {
            // $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
        },
        dataType: JSON
    });
});

Answer 1

You need to change the dataType: JSON to dataType: "json"