954,597 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

AJAX in Firefox doesnt update MYSQL!

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>

manilaguy
Newbie Poster
1 post since Aug 2009
Reputation Points: 10
Solved Threads: 0
 

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>
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You