Link to home
Start Free TrialLog in
Avatar of mightyestme
mightyestme

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of tdlewis
tdlewis
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mightyestme
mightyestme

ASKER

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

I see - thanks.
I see you accepted the solution, but you also posted a new set of code. Did you get it to work?
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