Database not updating in IE, works in Firefox

I have a series of checkboxes. When a user “checks” a box it updates the database on the fly. This works great in Firefox, but in IE8 I am getting some strange behavior.

In IE8, I can “check” a box and it updates fine. I can “uncheck” the same box and it works fine, but if I try again, it does not update the database. I am thinking that it may have something to do with the “Microsoft.XMLHTTP” part of the code but I have no idea how to correct the problem. Any help is greatly appreciated. Thanks.

Here is the code:

Javascript:


function chkit(uid, chk) {
   chk = (chk==true ? "1" : "0");
   var url = "check_validate.php?userid="+uid+"&chkYesNo="+chk;
   if(window.XMLHttpRequest) {
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   // Use get instead of post.
   req.open("GET", url, true);
   req.send(null);
}

PHP:


// Get the variables.
$userid = $_GET['userid'];
$chkYesNo = $_GET['chkYesNo'];

$sql = "
UPDATE vfe_lots
SET sold ='$chkYesNo'
WHERE id = '$userid'
";
mysql_query($sql) or die(mysql_error());

HTML & PHP:


<form action="#" method="get">
<table width="50%" cellpadding="3">	  
<?php 

include("dbconn.php");

	$query="select * from vfe_lots ";
	$result = mysql_query($query);

		$counter = 0;
		$cells_per_row = 2;
		while($row=mysql_fetch_array($result))
		{
    		$counter++;
    		if(($counter % $cells_per_row) == 1)  { echo '<tr style="background-color: #e3e3ce">'; }
    			echo '<td>Lot '.$row['id'].'</td><td><input name="chk" type="checkbox" id="chk_'.$row['id'].'" value="'.$row['id'].'" onclick="chkit('.$row['id'].', this.checked);" ';

			if ( $row['sold'] == 1 ) {
				echo "checked='yes'";
			}

		echo ' /></td>';

    if(($counter %  $cells_per_row) == 0) { echo '</tr>'; }
}
// just in case we haven't closed the last row
// this would happen if our result set isn't divisible by $cells_per_row
if(($counter % $cells_per_row) != 0) { echo '</tr>'; }
?>
</table>
</form>

To the link of javascript, append some harmless, unique value each time.
Like:

<script src='my-js-file.js?random=[every time new random value]>
</script>

Build the ajax url as:
check_validate.php?userid=“+uid+”&chkYesNo="+chk+‘random=’+Math.random();

This too has less chances of being cached.

That was it. Thanks a million.

Following up on what Felgall said…

NEVER use $_GET for write operations.
NEVER use $_POST for read operations.
NEVER use $_REQUEST.

Also, you might find life a little easier if you use a js framework like jQuery or prototype to handle the xmlhttprequest.

Hi bhaslip,
You can also use jquery which is supported in almost all browser and the code is simple to understand.


<script type="text/javascript" src="jquery.js"></script>
<script>
$.ajax({
			type: "POST",
			url: "ajax.php",
			data: "id="+id+"&rnd="+Math.random(),
			success: function(value){
				$("#DIVID").html(value);
			}
			})
</script>

Sounds like you are using GET rather than POST.

GET is supposed to cache results because it is not supposed to be used for updates.

Turning off caching for GET is effectively saying - I’m not doing any updates but don’t save the results because Ii expect the values to change even without being updated.

Sounds to me like IE is caching the request (and thus doesn’t actually make the AJAX call the second time you tick a checkbox).

Try adding the following headers to the PHP that is called by AJAX:


header('Cache-Control: no-cache');
header('Expires: Tue, 03 Jul 1982 06:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

That should disable cache completely in all browsers :slight_smile: