Question

I have written the following jquery code block. When a postcode is changed on my site this code is run but it only works fully the first time the postcode is changed. I have put three alerts in the code. When the code block has been run once I don’t get as far as the third alert. Am i doing something wrong?

$('#postcodefield').change(function(){
    var newPC = $(this).val()
    var areaData = null;
    var MAPITURL = "http://mapit.mysociety.org/postcode/";
    var postcodeUrl = MAPITURL + newPC;

    $('#gpQueryTerm').val(newPC);

    $.ajax({
        type : 'GET',
        async: false,
        url : postcodeUrl,
        dataType : 'json',
        error: function(){
            $('input[name=town]').val(6);
        },
        success: function(data){
            alert('1');
            areaData = data;
            alert('2');
            // Extract the ward number
            ward = areaData.shortcuts.ward;
            wardCode = areaData.areas[ward].codes.ons;
            // now we have the ons, get the townsend value from the db
            alert('3');
            $.post("/tasks/getTownsend.cfm", {
                code: wardCode
            }, function(data){
                $('input[name=town]').val(data);
            });
        }
    });
});

Thanks in advance

James

Answer 1

If the third alert is never being called then there must be an error with:

ward = areaData.shortcuts.ward;
wardCode = areaData.areas[ward].codes.ons;

Given the data in the question that’s the most detailed answer I can give. I suggest you take a look at the JSON response and make sure it’s what you expect it to be.