• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 893
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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