0

i faced issue while writing a class specially for handling Ajax calls & its response.

Purpose of below code : Based on user records exist in database, i need to set the flag "isPersonalDivRequiredFlag" for further use. 

// New ajax request class
function ajaxRequestHandler(){  
    this.needOutPutInJSON = 0;  
    this.url = "/libraries/ajaxHelper.php";
    this.requestType = "POST";
    this.isPersonalDivRequiredFlag = 0;
};

// Methods written for Class ajaxRequestHandler
ajaxRequestHandler.prototype = {        
        sentRequest : function(userData, typeID){
            var options = {type: this.requestType, context: this, url: this.url, data: { data: userData, type: typeID }};
            if(this.needOutPutInJSON){
                options.dataType = "json";
            }           
            // Check whether user want to see the response          
            options.success = function(rec){                
                if(rec == "1"){                                     
                    this.isPersonalDivRequiredFlag = 1;
                }                       
            };

            //Jquery Ajax
            $.ajax(options);
        },
        enableJSONoutput : function(){
            this.needOutPutInJSON = 1;          
        },      
        getFlagValue : function(){
            return this.isPersonalDivRequiredFlag;
        },
        setFlagValue : function(){
            console.log('Setflag Func called.');
            this.isPersonalDivRequiredFlag = 1;
        }
};

And i use the code as below.

var newRequest = new ajaxRequestHandler();
console.log('Before change [Value of isPersonalDivRequiredFlag variable] : ' + newRequest.getFlagValue());  // Output 0
newRequest.sentRequest({}, "recordExist");      
console.log('After change [Value of isPersonalDivRequiredFlag variable] : ' + newRequest.getFlagValue()); // Output 0

And when i set the flag "isPersonalDivRequiredFlag " to 1 inside the Success method of Ajax call but its unable to retain this value when it will be accessed through its own method "getFlagValue" function.

The whole piece of code will work fine if i remove Ajax call function & made it a normal prototype method. So i know the cause but not able to find any solution :(

what the things i tried already?
I found some techniques people suggested while Google it over internet.
a) Used this configuration inside Ajax call but no luck :(

 context:this

b) inside Success method : 

var myclass = this;

And called the prototype function as below

myclass.setFlagValue();

but no luck :(

Narendra Singh
  • 35
  • 1
  • 6
  • 2
    Your approach to solve the problem is correct (either one). But the other issue is that at the moment you are trying to *read* the new value, the Ajax response wasn't received yet, hence you still get the old value. Ajax is **asynchronous**. The code you put *after* `ewRequest.sentRequest({}, "recordExist");` runs *immediately*, before the response was received and the success callback was called. Have a look at this question: [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) – Felix Kling Aug 14 '13 at 07:17
  • Thank @felix-kling for suggesting such a great article. I planned to go with Callback – Narendra Singh Aug 16 '13 at 11:51

0 Answers0