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>

Hi manilaGuy,

you could try this simplified ajax example:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com ::   JavaScript / DHTML / AJAX</title>
<script type="text/javascript">
// <![CDATA[
var AJAX = ( function() {
   var xmlRequest = {
      XMLHttpRequest : new XMLHttpRequest(),
      ActiveXObject : ( function() {
      var xml;
      var prodId = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( var i = 0; i < prodId; i++ ) {
               if ( xml = new ActiveXObject( prodId[ i ] )) {
               break;
               }
            } return (( xml ) ? xml : 0 );
         } )(),
   createRequest : (( "createRequest" in window ) ? window.createRequest() : 0 )
   }; for ( x in xmlRequest ) {
      if ( x in window ) 
         return xmlRequest[ x ];
   } delete x;
} );

onload = ( function() {
   var $ = ( function( ids ) {
      return (( ids = document.getElementById( ids )) ? ids : ids = document.all[ ids ] ) || 0;
   } );
   var requestHandler = ( function() {
   var checkId = this.id;
   var name2 = $( "name" ).value;
   var review2 = $( "review" ).value;
   var stars2 = $( "stars" ).value;
   var school = $( "school" ).value;
   var stars;
      for ( x = 0; $( "r" + x ); x++ ) {
         if ( $( "r" + x ).checked ) {
            stars = $( "r" + x ).value;
            break;  
         }
      }
   var queryString = encodeURI((( checkId === "test" ) ? "?school=" + school + "&amp;neverused=" + new Date().getTime() : "?name=" + name2 + "&amp;school=" + school + "&amp;stars=" + stars + "&amp;review=" + review2 ) + "&amp;" + Math.random() );
   var xmlHttp = new AJAX();
   (( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );

xmlHttp.onreadystatechange = ( function() { 
      if ( { 4 : 4, complete : 4 }[ this.readyState ] ) { 
        if ( this.status === 200 ) {
         var ajaxDisplay = $("ajaxDiv");
         ajaxDisplay.innerHTML = this.responseText;    
         }  
      } 
   } ); // [ STATE CHANGED ]

   xmlHttp.open( "GET", String( "formProcessor.php" + queryString ), true );
   xmlHttp.send( null );
   return false;
   } );

   $( "test" ).onsubmit = requestHandler;
   $( "form" ).onsubmit = requestHandler;
} );

// ]]>
</script>
</head>
<body>
<div id="main">
<form id="test" action="#">
<div>
<select id="school" name="school" size="1">
<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="submit" value="- submit -" />
</div>
</form>
<div id="ajaxDiv">Your result will be displayed here</div>
<form id="form" action="#">
<table id="table" frame="box" rules="all" border="5" cellpadding="5" cellspacing="5" summary="http://www.daniweb.com">
<tr><th>VALUE</th><th>INPUT TYPE</th></tr>
<tr>
<th>Name : </th>
<td><input type="text" id="name" name="name" maxlength="30" size="30" value=" [ name ]" /></td></tr>
<tr>
<th>Stars :</th>
<td><input type="radio" id="r0" name="stars" value="1" checked="checked" /> 1 
<input type="radio" id="r1" name="stars" value="2" /> 2 
<input type="radio" id="r2" name="stars" value="3" /> 3 
<input type="radio" id="r3" name="stars" value="4" /> 4 
<input type="radio" id="r4" name="stars" value="5" /> 5 
</td>
</tr>
<tr style="vertical-align : top">
<th>Reviews</th>
<td>
<textarea id="review" name="review" cols="30" rows="10"> [ Enter Text ]</textarea></td></tr>
<tr>
<td colspan="2" style="text-align : right"><input type="submit" id="sbm2" name="sbm2" value="- submit -" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.