Hi,
I am very new to javascript and ajax. I am trying to make a page where you can choose different options for a package and the price will be automatically updated, similar to the way you can customize a computer at apple's website here. (http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/6774001/wo/Po1yyq1F6ePb2D3gHlkfT5qDRyP/2.?p=0)
I modified a script I got from a book and got it to work in Firefox but it gives me this error in ie7:
Line: 10
Char: 1
Error: Object expected
Code:0
Here is the a link to it
http://tophermorrison.com/form/
// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process(category, sprice, math)
{
price =document.getElementById("price").innerHTML;
price = parseInt(price);
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// execute the quickstart.php page from the server
xmlHttp.open("GET", "ajax_php.php?math=" + math + "&price=" + price + "&sprice=" + sprice + "&category=" + category, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
else
// if the connection is busy, try again after one second
setTimeout('process()', 1000);
}
// executed automatically when a message is received from the server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200)
{
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
var html = '';
count = xmlDocumentElement.childNodes[2].firstChild.data;
category = xmlDocumentElement.childNodes[1].firstChild.data;
price = xmlDocumentElement.childNodes[0].firstChild.data;
count = parseInt(count) + 3;
i = 3;
e = 3;
html = 'default';
while( i < count){
count = count - 1;
class = xmlDocumentElement.childNodes[e].getAttribute("class");
iname = xmlDocumentElement.childNodes[e].getAttribute("iname");
iprice = xmlDocumentElement.childNodes[e].getAttribute("iprice");
math = xmlDocumentElement.childNodes[e].getAttribute("math");
checked = xmlDocumentElement.childNodes[e].firstChild.data;
message = xmlDocumentElement.childNodes[e].getAttribute("message");
e = e + 1;
if(html == 'default'){
html = '<div class="' + class + '" onclick="process(' + "'" + iname + "'" + ',' + iprice + ',' + math + ');"><input class="radio" name="' + iname + '" type="radio" value="' + iprice + '" ' + checked + '/>' + message + '</div>';
}else{
html = html + '<div class="' + class + '" onclick="process(' + "'" + iname + "' " + ', ' + iprice + ', ' + math + ');"><input class="radio" name="' + iname + '" type="radio" value="' + iprice + '" ' + checked + '/>' + message + '</div>';
}
document.getElementById(category).innerHTML = html;
}
document.getElementById("price").innerHTML = price;
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}
and here is the php
<?PHP
//Generate XML output
header('Content-Type: text/xml');
//generate xml header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';