global variable is not set in jquery

Question

$(function(){
    var bwr_w = null; //global variable

//below function gets the dynamic data 
    function myfunc() { 
        var val = '2011'
        $.ajax({
            type: "POST",
            url: "allmaps.php",
            data: "year="+val ,
            cache: false,
            success: function(result){                  
                bwr_w= result.replace(/\s+/g, ''); //want to set the data again

            }
        });
    }

    myfunc(); //my dynamic function gets called

    $(".container_map").mapael({                                    
        map : {
            name : "usa_states"
        },
        plots: {
                bwr_w //this should work as per myfunc()
        }
    });

});

I am always getting bwr_w value as null even if I get a some value in ajax return I want my bwr_w to be set as global variable so that when I get some result from ajax it should change my map pins.

bwr_w is not really "global", `window.bwr_w` would be. you need to wait the return callback — lcapra, Feb 15 '15 at 21:56
I tried window.bwr_w = null; but I am still getting value as null — user3567372, Feb 15 '15 at 21:59

score 0 · Accepted Answer · answered Feb 15 '15 at 21:58

The issue is because the $.ajax call is asynchronous. This means that your myfunc is exited before the data is returned from the AJAX call. To fix this issue, put all code dependent on the returned data within the callback:

$(function () {
    var bwr_w = null; //global variable

    //below function gets the dynamic data 
    function myfunc() {
        var val = '2011'
        $.ajax({
            type: "POST",
            url: "allmaps.php",
            data: "year=" + val,
            cache: false,
            success: function (result) {
                bwr_w = result.replace(/\s+/g, ''); //want to set the data again
                $(".container_map").mapael({
                    map: { name: "usa_states" },
                    plots: { bwr }
                });               
            }
        });
    }

    myfunc();
});

If you want different logic executed on each call to myfunc pass it in as a callback function:

$(function () {
    //below function gets the dynamic data 
    function myfunc(callback) {
        var val = '2011'
        $.ajax({
            type: "POST",
            url: "allmaps.php",
            data: "year=" + val,
            cache: false,
            success: function (result) {
                var bwr_w = result.replace(/\s+/g, ''); //want to set the data again
                callback(bwr_w);
            }
        });
    }

    myfunc(function (bwr) {
        $(".container_map").mapael({
            map: { name: "usa_states" },
            plots: { bwr }
        });
    });
});

Thanks, can you please help me what exactly should I do in my case. — user3567372, Feb 15 '15 at 22:01
Thanks, I am getting what I want now. Thanks a lot for your great help.BTW I have used the callback function. — user3567372, Feb 15 '15 at 22:06

score 0 · Answer 2 · answered Feb 15 '15 at 21:59

See here

$(function(){
    var bwr_w = null; //global variable

    //below function gets the dynamic data 
    function myfunc(then) { 
        var val = '2011'
        $.ajax({
            type: "POST",
            url: "allmaps.php",
            data: "year="+val ,
            cache: false,
            success: function(result){                  
                then && then(result);                   
            }
        });
    }

    myfunc(function() {

      bwr_w= result.replace(/\s+/g, ''); //want to set the data again

    $(".container_map").mapael({                                    
        map : {
            name : "usa_states"
        },
        plots: {
                bwr_w //this should work as per myfunc()
        }
      });
    }); 
});

global variable is not set in jquery

2 Answers2