CODEWITHSUNDEEP
javascriptxmlhttprequest
aprofomo
aprofomo

Reputation: 3

JavaScript variable not changing with XMLHttpRequest

I tried to run this but it doesn't work. It is intended to return a variable assigned inside a function, that was passed as callback to sendRequest(), which is retrieving data from the Internet through XMLHttpRequest asynchronously.

Can anyone tell me why this is not working and always returning ""?

function sendRequest(requestCode, args, callback){
	var req = requestEngineUrl + "?req=" + requestCode + ";" + args;
	var xmlHttp = new XMLHttpRequest();
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4)
		{	
			if(callback != null){
				callback(xmlHttp.responseText);
			}
		}
	};
	xmlHttp.open("GET", req, true);
	xmlHttp.send(null);
}

this.assembleProcess = function(){
		if(!isNull(this.id) && !isNull(this.titles)){
			var titles = this.titles;
			var id = this.id;
			c = "";
			sendRequest('304', id, 
				function(result){
					var res = result.split("/");
					var title = res[0];
					var possibilities = res[1];
					var fcontent = title + '<br><div>';
						if(titles.length != possibilities){
							console.log("WARNING: [SURVEYCARD].titles has not the same length as possibilities");
						}
					
						for(i = 0; i < possibilities; i++){
							fcontent += '<div><a onclick="sendRequest("301",' + id + ',' + i + ',null)">' + titles[i] + '</a></div>';
						}
					
					fcontent += '</div>';
					c = fcontent;
				});
			return c;
		}

Upvotes: 0

Views: 114

Answers (1)

jperelli
jperelli

Reputation: 7197

As an XMLHttpRequest is async, you should write an async function for that matter, like this

this.assembleProcess = function(callback){
        if(!isNull(this.id) && !isNull(this.titles)){
            var titles = this.titles;
            var id = this.id;
            c = "";
            sendRequest('304', id, 
                function(result){
                    var res = result.split("/");
                    var title = res[0];
                    var possibilities = res[1];
                    var fcontent = title + '<br><div>';
                        if(titles.length != possibilities){
                            console.log("WARNING: [SURVEYCARD].titles has not the same length as possibilities");
                        }

                        for(i = 0; i < possibilities; i++){
                            fcontent += '<div><a onclick="sendRequest("301",' + id + ',' + i + ',null)">' + titles[i] + '</a></div>';
                        }

                    fcontent += '</div>';
                    c = fcontent;
                    callback(c)
                });
        }

and then, instead of using this.assembleProcess as a function with a result, you should pass a function as parameter:

Instead of

console.log(this.assembleProcess);

do this

this.assembleProcess(function(c){console.log(c)});

Upvotes: 1

Related Questions