Store ajax data into a global variable

Question

Continuing with JQuery - Storing ajax response into global variable

Accepted solution somehow does not work for me.

$(document).ready(function() {
    var dataStore = (function(){
        var xml;

        $.ajax({
          type: "GET",
          url: "/?do=getcontentadm1n&category=homepage",
          dataType: "json",
          success : function(data) {
                        xml = data.html;
                alert(xml); // WORKS
                    }
        });

        return {getXml : function()
        {
            if (xml) return xml;
        }};
    })();

    var somevar = dataStore.getXml();

    alert(somevar); // UNDEFINED
});

Is there other solution?

Thanks.

Answer 1

It's empty because by the time getXml is called, the ajax request has not completed, remember ajax is asynchronous. One way to get around it is to force it to be synchronous:

       $.ajax({
          async: false,
          type: "GET",
          url: "/?do=getcontentadm1n&category=homepage",
          dataType: "json",
          success : function(data) {
                        xml = data.html;
                alert(xml); // WORKS
                    }
        });

Responding to comment:

I want perform AJAX onclick, then store data.html for other mouse events

var dataStore = (function(){
    var html;
    function load(){
           $.ajax({
              async: false,
              type: "GET",
              url: "/?do=getcontentadm1n&category=homepage",
              dataType: "json",
              success : function(data) { html = data.html; }
            });
    }
    return {
        load : function() { 
            if(html) return;
            load();
        },
        getHtml: function(){
             if(!html) load();
             return html;
        }
    }
})();

$(element1).click(function(){
    dataStore.load();
});

$(element2).click(function(){
    var html = dataStore.getHtml();
    // use html
});

Answer 2

The ajax call is async. It probably hasnt finished running when you call:

var somevar = dataStore.getXml();

Answer 3

Alright this is my first Reply but here it goes.

I've been bashing my head against this issue myself and learned this.

When you define a variable outside a function, it is automaticly added to the 'window' object.

so if we do this:

    var myValue;
    function setValue()
    {
        myValue = "test";
    }
    // Assuming setValue() has been run
    function getValue()
    {
        alert(window.myValue); // yup, it's "test"
    }

So if we use this knowledge to store $.ajax data in a variable it will go like this.

    var xml;

    $.ajax({
        type: "GET",
        url: "/?do=getcontentadm1n&category=homepage",
        dataType: "json",
        success : function(data) {
            window.xml = data;
        }
    });

    alert(window.xml);

I think this will clear up quite alot for many people and get you to your answer. Thanks for reading my reply and the source: http://snook.ca/archives/javascript/global_variable

EDIT: As mentioned in the comment below, this only works when async = false.

Answer 4

Just use a 'async:false' Ajax and don't user var keyword for making Global response.

Answer 5

@ggreiner: Forget about using functions in variables. You are confusing other users.

I'm a little angry, but nothing personal, there are NO solutions on Internet available to store AJAX data in the vars and use them in events.

NO NEED TO USE ANY FUNCTIONS IN VARIABLES like var dataStore = (function(){. This will call additional servers requests everytime you need data.

Here is the code for calling ajax ONCE and use it's data for any other events, functions. That was the MAIN CONCERT of 99% users asking for this

$(document).ready(function() {
    var html; // DEFINE VARS
    var css;
    var js;

    $('.editbutton').live('click', function() {
        $.ajax({
            async   : false, // !!!MAKE SURE THIS ONE IS SET!!!
            type    : "GET",
            url : "/?do=getcontent",
            data    : { category: category },
            dataType: 'json',
            success : function(data) {
                if (data.status == 'ok') {
                                html = data.html; // !!!STORE!!!
                                css = data.css;  // !!!STORE!!!
                                js = data.js;  // !!!STORE!!!
                }
                if (data.status == 'error') {
                    alert('ERROR!');
                }
            }
        });
    });

    // CALL ANY STORED VARIABLE FROM ANYWHERE

    $('.otherbutton').live('click', function() {
        alert(html); alert(css); alert(js);
    });

});