[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Help debug javascript with AJAX - what is the right structure to be in the javascript?

Posted on 2012-08-24
10
Medium Priority
?
575 Views
Last Modified: 2012-09-12
I am trying to create a dynamic web page which gets some content in async mode from a jsp running on a server.
I have 2 action points:
When the HTML first loads users have to click on a button to get some images from the server. After this, users can modify images based on some dropdown values they change.

I got the first part to work where it gets the right images from the jsp but I can't control how or when the dropdown change works. I am new to AJAX and web programming.

<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question </title>
<script type="text/javascript">
	function loadXMLDoc() {
		var xmlhttp;
		var indiv_id;
		var idd; 
		var destination;
		var depDate;
		var dest;
		var depd;

		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() {
			
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			}
		}
		idd=document.getElementsByName("i"); 
		indiv_id=idd[0].value;
		
		dest=document.getElementsByName("destination");
		destination=dest[0].value;
		
		depd=document.getElementsByName("traveldt");
		depDate=depd[0].value;
		
		var url="ajaxReturnOffer.jsp?indiv_id="+indiv_id+"&destination="+destination+"&depDate="+depDate;
		alert(url);
		
		xmlhttp.open("GET",url, true);
		xmlhttp.send();
	}
	
	function changeDD() {
		var destination_dd;
		var depDate_dd;
		var destIndex;
		var depdIndex;
		destIndex = document.getElementById('destination_dd').selectedIndex;
    	destination_dd = document.getElementById('destination_dd')[destIndex].value;
		
    	depdIndex = document.getElementById('traveldt_dd').selectedIndex;
    	depDate_dd = document.getElementById('traveldt_dd')[depdIndex].value;
    	
    	alert(destination);
    	alert(depDate);
		
    	var url_dd="ajaxReturnOffer.jsp?indiv_id="+indiv_id+"&destination="+destination_dd+"&depDate="+depDate_dd;
		alert(url_dd);
		
		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">
	<input id="destination" name="destination" value="LA">
	
	<input id="traveldt" name="traveldt" value="082012">
	<button type="button" onclick="loadXMLDoc()">Get first offers</button>
	<BR>
	Select new destination and date
	<select name="destination_dd" id="destination_dd"  onChange="changeDD();">
		<option value="LA">LA</option>
		<option value="NYC">NYC</option>
	</select>
	
	<select name="traveldt_dd" id="traveldt_dd"  onChange="changeDD();">
		<option value="082012">Aug 2012</option>
		<option value="122012">Dec 2012</option>
	</select>
	
	<div id="myDiv">
		<h2>Let AJAX change this text</h2>
	</div>


</body>
</html>

Open in new window

0
Comment
Question by:mightyestme
  • 4
  • 4
8 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 38332418
I can offer you a jQuery solution :)

$(document).ready(function() {
	getNewData();
	$('select').change(getNewData);
	
	function getNewData() {
		$.ajax({
     		url: 'ajaxReturnOffer.jsp',
     		data: { indiv_id : $('#i').val(), destination : $('#destination_dd').val(), depDate : $('#traveldt_dd').val() },
     		dataType: 'html',
     		success: function(data) {
     			$('#myDiv').html(data);
		}
		});
	}
});

Open in new window

Basically this will load up your data on page load and then reload the new data when the Dropdowns change.

Don't know whether you have a specific reason to not use jQuery, but if not, it makes like a lot easier...
0
 

Author Comment

by:mightyestme
ID: 38332505
I copy pasted your code but it does nothing. This is what I have now with jscript

<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script>
	$(document).ready(function() {
		getNewData();
		$('destination_dd').change(getNewData);
		
		function getNewData() {
			$.ajax({
	     		url: 'ajaxReturnOffer.jsp',
	     		data: { indiv_id : $('#i').val(), destination : $('#destination_dd').val(), depDate : $('#traveldt_dd').val() },
	     		dataType: 'html',
	     		success: function(data) {
	     			$('#myDiv').html(data);
			}
			});
		}
	});                          
</script>
</head>
<body>
	<input id="i" name="i" value="2">
	<input id="destination" name="destination" value="Vancouver">
	
	<input id="traveldt" name="traveldt" value="082012">
	<button type="button" onclick="loadXMLDoc()">Get first offers</button>
	<BR>
	Select new destination and date
	<select name="destination_dd" id="destination_dd"  onChange="">
		<option value="Vancouver">Vancouver</option>
		<option value="Zurich">Zurich</option>
	</select>
	
	<select name="traveldt_dd" id="traveldt_dd"  onChange="">
		<option value="082012">Aug 2012</option>
		<option value="122012">Dec 2012</option>
	</select>
	
	<div id="myDiv">
		<h2>Let AJAX change this text</h2>
	</div>


</body>
</html>

Open in new window

0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 38332521
Couple of things to note. You are only applying the 'change' event to the Destination dropdown - not the Date one. You need to apply it to both. You can either use the 'select' tag, or apply a class and use that. Using the select tag will apply the function to ALL selects on your page, so you may be better off applying a class.

Secondly, you have left the onChange event on each of the dropdowns. This isn't needed as jQuery takes care of it.
$('.changeable').change(getNewData);

<select name="destination_dd" id="destination_dd"  class="changeable">
<select name="traveldt_dd" id="traveldt_dd"  class="changeable">

Open in new window


Here's a full copy of your page - working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	getNewData();
	$('select').change(getNewData);
	
	function getNewData() {
		$.ajax({
			url: 'ajaxReturnOffer.jsp',
			data: {
				indiv_id : $('#i').val(),
				destination : $('#destination_dd').val(),
				depDate : $('#traveldt_dd').val()
			},
			dataType: 'html',
			success: function(data) {
				$('#myDiv').html(data);
			}
		});
	}
});
</script>
</head>

<body>
	<p>Select new destination and date</p>

	<input type="text" id="i" name="i" value="2">

	<select name="destination_dd" id="destination_dd">
		<option value="LA">LA</option>
		<option value="NYC">NYC</option>
	</select>
	
	<select name="traveldt_dd" id="traveldt_dd">
		<option value="082012">Aug 2012</option>
		<option value="122012">Dec 2012</option>
	</select>
	
	<div id="myDiv"></div>
</body>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38332534
Slight error in my previous post. You aren't applying the change event to anything. The jQuery selector is similar to CSS, so you need to use a CSS selector for tags, classes, IDs etc.

$('#someID').change(getNewData); //select one element with an ID of someID
$('.someClass').change(getNewData); //select all elements with a class of someClass
$('select').change(getNewData); //select all SELECT elements

You just had:

$('destination_dd').change(getNewData);

which is trying to select a destination_dd tag.
0
 

Author Comment

by:mightyestme
ID: 38333431
It works! thanks.
0
 

Author Comment

by:mightyestme
ID: 38333914
I've requested that this question be closed as follows:

Accepted answer: 0 points for mightyestme's comment #a38333431

for the following reason:

Excellent
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 38333915
Pleased it works.

Why are you closing the question with your own answer as the solution?
0
 

Author Comment

by:mightyestme
ID: 38390373
I was away from EE for a while (work then vacation) hence the delay - your answer ( ChrisStanyon) is the right one and deserves the points.
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question