• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 882
  • Last Modified:

Help debug javascript ajax - undefined variable

I have been struggling creating a URL using javascript. Attached is my code.
Can someone help debug?tryAjax.html

WHAT I WANT:
I am trying to create a simple ajax program that will change some text on the page using value returned by some jsp. I have an input box on the html which accepts a value. I want to pass this value in a URL to the GET request.


ISSUE:
alert(indiv_id) works. I can see the value i input in the text box
but when i do
alert(url) it shows me undefined.

I have been trying to fix it but no success. Here is the code (same as attached in the html file)

<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question </title>
<script type="text/javascript">
	function loadXMLDoc() {
		var xmlhttp;
		var indiv_id;
		var idd; 
		
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			idd=document.getElementsByName("i"); 
			indiv_id=idd[0].value;
			alert(indiv_id);
			
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			}
		}
		
		var url="ajaxReturnOffer.jsp?indiv_id="+indiv_id;
		alert(url);
		xmlhttp.open("GET",url, true);
		xmlhttp.send();
	}
	
	function handleResponse() {
		if (http.readyState == 4 && http.status == 200) {
			var response = http.responseText;
			if (response) {
				document.getElementById("myDiv").innerHTML = response;
				alert('received something from Ajax');
			}
		}
	}
	
</script>
</head>
<body>
	<input id="i" name="i" value="2">
	<div id="myDiv">
		<h2>Let AJAX change this text</h2>
	</div>
	<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Open in new window

0
mightyestme
Asked:
mightyestme
  • 3
  • 2
1 Solution
 
tdlewisCommented:
You have a timing problem. The value of indiv_id does not get set until xmlhttp.onreadystatechange fires the first time.

At the time you create the URL, indiv_id is undefined.

Here is the order things are happening:
1. Create xmlhttp
2. Set xmlhttp.onreadystatechange
3. Set the value of url (indiv_id is still undefined)
4. Send the xmlhttp request
5. xmlhttp.onreadystatechange fires and sets the value of indiv_id

One way to address this problem is as follows:
idd=document.getElementsByName("i");
indiv_id=idd[0].value;
var url="ajaxReturnOffer.jsp?indiv_id="+indiv_id;

Open in new window

0
 
mightyestmeAuthor Commented:
I tried this but hitting the change button does nothing. Seems like the URL is broken (and I am not declaring/setting variables at the right place)

<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question </title>
<script type="text/javascript">
	function loadXMLDoc() {
		var xmlhttp;
		var indiv_id;
		var idd; 
		
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			idd=document.getElementsByName("i"); 
			indiv_id=idd[0].value;
			var url="ajaxReturnOffer.jsp?indiv_id="+1;
			alert(url);
			
			
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			}
		}
		
		xmlhttp.open("GET",url, true);
		xmlhttp.send();
	}
	
	function handleResponse() {
		if (http.readyState == 4 && http.status == 200) {
			var response = http.responseText;
			if (response) {
				document.getElementById("myDiv").innerHTML = response;
				alert('received something from Ajax');
			}
		}
	}
	
</script>
</head>
<body>
	<input id="i" name="i" value="2">
	<button type="button" onclick="loadXMLDoc()">Change Content</button>
	<div id="myDiv">
		<h2>Let AJAX change this text</h2>
	</div>


</body>
</html>

Open in new window

0
 
mightyestmeAuthor Commented:
I see - thanks.
0
 
tdlewisCommented:
I see you accepted the solution, but you also posted a new set of code. Did you get it to work?
0
 
mightyestmeAuthor Commented:
Yes i did - but I just complicated it further by adding  a dropdown and trying to fire events using dropdown.onChange()
Will create another question
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now