mightyestme
asked on
Help debug javascript with AJAX - what is the right structure to be in the javascript?
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.
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>ASKER
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>
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.
Here's a full copy of your page - working.
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">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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It works! thanks.
ASKER
I've requested that this question be closed as follows:
Accepted answer: 0 points for mightyestme's comment #a38333431
for the following reason:
Excellent
Accepted answer: 0 points for mightyestme's comment #a38333431
for the following reason:
Excellent
Pleased it works.
Why are you closing the question with your own answer as the solution?
Why are you closing the question with your own answer as the solution?
ASKER
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.
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...