even after declearing a variable as global throwing an error

Question

$(document).ready(function() {
    var arr, data;
    $.ajax({  
        type: 'GET',   
        url: CTX_PATH + "/forms/programplanner/products/productProgramsDataTableAfterFilter",  
        data: { 
            productStatusType: productStatusType, 
            productStatusForEachProduct: productStatusForEachProduct 
        },  
        success: function (data) {  
            var arr = data.split(',');
        }
    });

    $("#status_Type_for_each_product").live("change", function() {
        var productStatusType = $("#status_Type_for_products").val();
        var productStatusForEachProduct = $("#status_Type_for_each_product").val();
        var statusType = arr[0];
        var statusForEachProduct = arr[1];
        sample(productStatusType, productStatusForEachProduct);
        $.ajax({
            type: 'GET',
            url: CTX_PATH + '/form/programplanner/update/eachProductStatusType/' + productStatusForEachProduct,
            success: function(data) {
            }
        });
    });
});

error: Uncaught TypeError: Cannot read property '0' of undefined at HTMLSelectElement. (pp_products.js:587) at HTMLDocument.dispatch (jquery-1.8.3.min.js:2) at HTMLDocument.u (jquery-1.8.3.min.js:2)

waiting for your response. thank you.

Answer 1

Please remove var from success handler:

success: function (data) {  
     arr = data.split(',');
}

By defining it again as var arr = you are initializing the local scoped variable and not setting the globally declared variable.