Hi guys! I'm designing my first site and i've stumbled on huge block. Problem I'm having is that Ajax doesn't seem to update my MYSQL table in firefox. I have two forms and two functions (each initiating a XMLHttpRequest). First is to display a MYSQL query using PHP and second is to update with values -- all dynamically. The pulling the data and updating works in Internet Explorer but only the first works in firefox. I can't seem to update the tables in firefox.
Please help me out with this. Here is my site. Try it with IE then with firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function ajaxFunction()
{
var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch(e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser broke!");
return false;
}
}
}
//code goes here
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var d = new Date(); //cache
var schooler = document.getElementById('school').value;
var queryString = "?school=" + schooler + "&neverused="+d.getTime();
ajaxRequest.open("GET", "formProcessor.php" + queryString, true);
ajaxRequest.send(null);
}
//function 2
function ajaxFunction2()
{
var ajaxRequest2;
try
{
ajaxRequest2 = new XMLHttpRequest();
}
catch(e)
{
try
{
ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser broke!");
return false;
}
}
}
//code goes here
ajaxRequest2.onreadystatechange = function()
{
if(ajaxRequest2.readyState == 4)
{
var ajaxDisplay2 = document.getElementById('ajaxDiv');
ajaxDisplay2.innerHTML = ajaxRequest2.responseText;
}
}
var stars
for (var i=0; i<document.form.stars.length; i++)
{
if (document.form.stars[i].checked)
{
stars = document.form.stars[i].value
}
}
var name2 = document.getElementById('name').value;
var schools2 = document.getElementById('school').value;
var stars2 = document.getElementById('stars').value;
var review2 = document.getElementById('review').value;
var queryString = "?name=" + name2 + "&school=" + schools2 + "&stars=" + stars + "&review=" + review2;
ajaxRequest2.open('GET', 'formProcessor2.php' + queryString, true);
ajaxRequest2.send(null);
}
</script>
<center><form name='test'>
<select id='school'>
<option value='Casa Xelaju'>Casa Xelaju</option>
<option value='Celas Maya'>Celas Maya</option>
<option value='Hard Knock'>Hard Knock</option>
<option value='Random School'>Random School</option>
</select>
<input type='button' value='submit' onclick='ajaxFunction()'>
</form>
<div id='ajaxDiv'>Your result will display here</div>
<form name='form'>
<table border='5' align='center' cellpadding='3'>
<tr><th>VALUE</th><th>INPUT TYPE</th></tr>
<tr><td>Name</td>
<td>
<INPUT TYPE='text' id='name' maxlength='30' size='30' value='entername'>
</td>
</tr>
<tr><td>Stars</td>
<td>
<input type='radio' name='stars' value='1' checked>1
<input type='radio' name='stars' value='2'>2
<input type='radio' name='stars' value='3'>3
<input type='radio' name='stars' value='4'>4
<input type='radio' name='stars' value='5'>5
<td></tr>
<tr valign='top'><td>Review</td>
<td>
<TEXTAREA id='review' cols='30' rows='10' nowrap> Enter Text</TEXTAREA>
<td>
</tr>
<tr>
<td colspan='2' align='right'>
<input type='button' value='submit' onclick='ajaxFunction2()'>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>