Returning value from AJAX request in a global variable

Question

Hi all,

Sorry if this question is duplicated but I couldn't solve my problem from other solutions.

I've got this code in a sepate file included in my main index:

var getSuggestedData = {    
serviceURL: $("input[name=suggestedServices]").val(), 
dataR:"",  
doRequest:function(){
 //request data to controller
 $.ajax({
  url:this.serviceURL,
  success:function(msg){    
   this.dataR = msg;    
  }   
 })     
}

}

When I'm trying to get the variable "dataR" from my index this way it's UNDEFINED! PLEASE, can someone help me out?

$().ready(function() {
getSuggestedData.doRequest(); 
alert(getSuggestedData.dataR);

});

Thank you in advance!

Answer 1

The reason you are not able to access the dataR object is because it is not in the same context as the result returned from the success method.

One technique is to hold a reference to this in a variable as shown below:

var self = this;

using the jquery library!
    $(this.button).bind('click',{self:this},function(event) 
    {
        var that = event.data.self;
        alert(that.num);

    });

You can also check out the post below in which I explained in detailed about the "this" keyword.

http://azamsharp.com/Posts/57%5FI%5Fmean%5F%5Fthis%5F%5Fnot%5F%5Fthis%5F.aspx

Answer 2

If memory serves me right...

this.dataR = msg;

probably needs to be

getSuggestedData.dataR = msg

the 'this' reference would be to the object fed to jQuery, you need to reference the original object. I forget if you could access it by its name directly such as this or if you need to use another method, let me know if it doesn't work out though.