Store ajax data in a global variable

Question

Continuation of jQuery - saving ajax response in a global variable

The decision made 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 any other solution?

Thanks.

Answer 1

It is empty, because by the time getXml the ajax request is not yet complete, remember that ajax is asynchronous. One way around this is to make it synchronous:

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

Responding to a comment:

I want to execute AJAX onclick and 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

Ajax call is asynchronous. It probably didn't finish when you call:

 var somevar = dataStore.getXml(); 

Answer 3

Ok, this is my first answer, but here it is.

I myself was punching my head over this problem and found out about it.

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

therefore, if we do this:

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

So, if we use this knowledge to store $ .ajax data in a variable, it will look 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 clarify a lot for many people and give you an answer. Thanks for reading my answer and source: http://snook.ca/archives/javascript/global_variable

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

Answer 4

@ggreiner: Forget using functions in variables. You confuse other users.

I'm a little angry, but nothing personal, there are no solutions available on the Internet for storing AJAX data in vars and using them in events.

NO NEEDS TO USE ANY FUNCTIONS IN VARIABLES, like var dataStore = (function () {. This will cause additional server requests every time you need data.

Here is the code to call ajax ONCE and use it for any other events, functions. It was a MAIN CONCERT 99% of users asking for it

 $(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); }); }); 

Answer 5

Just use the keyword 'async:false' Ajax and not the user var to create a global response.