AJAX/JS/PHP/MySQL works in Firefox but not in IE.

max_power · May 12, 2009

Hi,

First I will list the code of concern:

function getHTTPObject() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (!xmlhttp){
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    
}
  return xmlhttp;

  
}
var http = getHTTPObject(); // We create the HTTP Object

/*
Funtion Name=requestInfo 
Param = url >> Url to call : id = Passing div id for multiple use ~ as a seprator for eg. div1~div2 :
redirectPage >> if you like to redirect to other page once the event success then 
the response text = 1 and the redirectPage not left empty
*/

    function requestInfo(url,id,redirectPage) {      
	var temp=new Array();
		http.open("GET", url, true);
		http.onreadystatechange = function() {
			if (http.readyState == 4) {
			  if(http.status==200) {
		  		var results=http.responseText;
				if(redirectPage=="" || results!="1") {

					var temp=id.split("~"); // To display on multiple div 
					//alert(temp.length);
					var r=results.split("~"); // To display multiple data into the div 
					//alert(temp.length);
					if(temp.length>1) {
						for(i=0;i<temp.length;i++) {	
							//alert(temp[i]);
							document.getElementById(temp[i]).innerHTML=r[i];
						}
					} else {
						document.getElementById(id).innerHTML = results;
					}	
				} else {
					//alert(results);
					window.location.href=redirectPage;			
				}
			  } 
  				}
		};
		http.send(null);
       }

/*
Function Name= emptyValidation
Desc = This function is used to validation for the empty field 
Param fieldList = This arguments set as a string varialble. you just need to supply the textbox name
if the textbox is multiple then supply with ~ separator for eg. username~password
*/

function emptyValidation(fieldList) {

	var field=new Array();
	field=fieldList.split("~");
	var counter=0;
	for(i=0;i<field.length;i++) {
		if(document.getElementById(field[i]).value=="") {
			document.getElementById(field[i]).style.backgroundColor="#FF0000";
			counter++;
		} 
		else {
			document.getElementById(field[i]).style.backgroundColor="#FFFFFF";	
			}

	}
	if(counter>0) {
			alert("The Field mark as red could not left empty");
			return false;

	}  else {
		return true;
	}


}
function loginProcess() {
var var_username=document.getElementById("username").value;
var var_password=document.getElementById("password").value;

var checkValidation=emptyValidation('username~password');

if(checkValidation==true) {
	requestInfo('login_check.php?username='+var_username+'&password='+var_password,'loginDetails','welcome.php');
} else {
	return false;
}
}
function init_table() {
	requestInfo('showTable.php?mode=list','showTable','');
}

function save_data() {
		var id=document.getElementById("id").value;
		var author=document.getElementById("author").value;
		var last_updated=document.getElementById("last_updated").value;
		var category=document.getElementById("category").value;
		var event=document.getElementById("event").value;
		var summary=document.getElementById("summary").value;
		var checkValidation=emptyValidation('id~author~last_updated~category~event~summary');

	if(checkValidation==true) {
		requestInfo('showTable.php?mode=save_new&id='+id+'&author='+author+'&last_updated='+last_updated+'&category='+category+'&event='+event+'&summary='+summary,'showTable','');
	} 
}

function update_data() {
		var prev_id=document.getElementById("prev_id").value;
		var id=document.getElementById("id").value;
		var author=document.getElementById("author").value;
		var last_updated=document.getElementById("last_updated").value;
		var category=document.getElementById("category").value;
		var event=document.getElementById("event").value;
		var summary=document.getElementById("summary").value;
		var checkValidation=emptyValidation('id~author~last_updated~category~event~summary');

	if(checkValidation==true) {
		requestInfo('showTable.php?mode=update_data&id='+id+'&author='+author+'&last_updated='+last_updated+'&category='+category+'&event='+event+'&summary='+summary+'&prev_id='+prev_id,'showTable','');

	} 
}

function confirmLink(theLink)
{
   
    var is_confirmed = confirm('Are you sure to delete this record?\n\nThis will permanently delete the Record!');
    if (is_confirmed) {
        theLink.href += '';
    }

    return is_confirmed;
}

Here is the PHP code:

<?php
include("includes/host_conf.php");
include("includes/mysql.lib.php");
$obj=new connect;
$mode=$_GET["mode"];

	echo "<table width='550' border='0' cellpadding='4' cellspacing='1' bgcolor='#eeeeee' align='center'>";
	echo "<tr>";
	echo "<td colspan=5> <a href=\"javascript:requestInfo('showTable.php?mode=new&id=$id','showTable','')\">Add New Events</a> || <a href=\"javascript:requestInfo('showTable.php?mode=list','showTable','')\">Refresh</a> || <a href=ticker.php>Ticker</a></td>";
	echo "</tr>";

	echo "<tr>";
		echo "<th> ID ";
		echo "<th> Author";
		echo "<th> Last Updated";
		echo "<th> Category";
		echo "<th> Event";
		echo "<th> Summary";
	echo "</tr>";
	// For Delete 
	if($mode=="delete") {		
		$var_id=$_GET["id"];
		$sqlDelete="Delete from events where id='$var_id'";
		$obj->query($sqlDelete);
		echo "<td><a href=\"javascript:delete_data();\">Delete</a>";
		echo "<tr>";
			echo "<td colspan=3>Data Deleted";
		echo "</tr>";

	}
	// End of Delete 


	// For Add New Data -- Display Text box and the Cancel and Save Option 
	if($mode=="new") {
		echo "<tr>";
			echo "<td> <input id='id' size=5> ";
			echo "<td> <input id='author' size=10> ";
			echo "<td> <input id='last_updated' size=10> ";
			echo '<td> <select id="category" name="category">
						<option value="category1">category1</option>
						<option value="category2">category2</option>
						<option value="category3">category3</option>
						<option value="category4">category4</option>
						</select> ';
			echo '<td> <textarea id="event" name="event" rows="12" cols="25"></textarea><td><textarea id="summary" name="summary" rows="5" cols="25"></textarea> ';
			echo "<td<a href=\"javascript:requestInfo('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a></td>";
			echo "<td><a href=\"javascript:save_data();\">Save</a>";

		echo "</tr>";
	}
	// End of Add New Data


	// After Click on Add >> Save option the data is save into the database 
	if($mode=="save_new") {
		$id=$_GET["id"];
		$author=$_GET["author"];
		$last_updated=$_GET["last_updated"];
		$category=$_GET["category"];
		$event=$_GET["event"];
		$summary=$_GET["summary"];
		$sqlSave="Insert into events values('$id','$author','$last_updated','$category','$event','$summary')";
		$obj->query($sqlSave);
		echo "<tr>";
			echo "<td colspan=3>Data Saved";
		echo "</tr>";
	}
	// End of save_new 

	// For Update save Option
	if($mode=="update_data") {
		$prev_id=$_GET["prev_id"];
		$id=$_GET["id"];
		$author=$_GET["author"];
		$last_updated=$_GET["last_updated"];
		$category=$_GET["category"];
		$event=$_GET["event"];
		$summary=$_GET["summary"];
		$sqlUpdate="UPDATE events SET author = '$author', last_updated = '$last_updated', category = '$category', event = '$event', summary = '$summary',id='$id' WHERE id='$prev_id'";
		$obj->query($sqlUpdate);
		echo "<tr>";
			echo "<td colspan=3>Data Updated";
		echo "</tr>";
	}
	// End of Update

	// Display all the data from the table 
		$sql="SELECT id,author,last_updated,category,event,summary FROM events order by id desc";
		$obj->query($sql);	
		while($row=$obj->query_fetch(0)) {
			$id=$row['id'];
			$author=$row['author'];
			$last_updated=$row['last_updated'];
			$category=$row['category'];
			$event=$row['event'];
			$summary=$row['summary'];
		echo "<tr bgcolor='#ffffff'>";
		// if Mode is Update then get the ID and display the text field with value Other wise print the data into the table 
		if($mode=="update") {
			$id_=$_GET["id"];

		}
		if($id_==$id) {
			echo "<input type='hidden' value='$id_' name='prev_id' id='prev_id'>";
			echo "<td> <input type='number' value='$id' id='id' size='5'> </td> ";
			echo "<td> <input type='text' value='$author' id='author' size='10'> </td> ";
			echo "<td> <input type='text' value='$last_updated' id='last_updated' size='10'> </td> ";
			?><td> <select id="category" name="category">
						<option><? echo $category; ?></option><? echo '
						<option value="category1">category1</option>
						<option value="category2">category2</option>
						<option value="category3">category3</option>
						<option value="category4">category4</option>
						</select> ';
			?><td> <textarea id ="event" name="event" rows="12" cols="25"><? echo $event; ?></textarea><td><textarea id ="summary" name="summary" rows="5" cols="25"><? echo $summary; ?></textarea> <?
			echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a> </td> ";
			echo "<td><a href=\"javascript:update_data();\">Save</a>";
			}  else {
			echo "<td>$id</td>";
			echo "<td>$author</td>";
			echo "<td>$last_updated</td>";
			echo "<td>$category</td>";
			echo "<td>$event</td>";
			echo "<td>$summary</td>";
			echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=update&id=$id','showTable','')\">Update</a> </td> ";
			echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=delete&id=$id','showTable','');\" onclick='return confirmLink(this);'>Delete</a></td>";
		}		

		echo "</tr>";

		}
	echo "</table>";

?>

I am pretty sure the javascript has got something to do with the fact that everything works in Firefox yet when I try to add new data/update data/deleted data and then refresh the page, no changes occur.

Is it got something to do with the getHTTPObject()? Its only in IE it doesnt work, in Opera, Firefox and Safari everything works.

Any help will be appreciated.

Thanks

Eassam

JonnoTheDev · May 12, 2009

This will catch any error

function getHTTPObject() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};

Create the http object within the JS function

function requestInfo(url,id,redirectPage) {
var http = getHTTPObject();
}

max_power · May 12, 2009

Hi.

Thanks for the reply.

Tried that and it still doesnt propery perform any of the functions (add/update/delete) when I refresh the page it goes back to the original data, only in IE.

BTW I am testing it on IE 6.

JonnoTheDev · May 12, 2009

Can you add an alert to check the http object exists

alert(http)

You haven't got javascript disabled have you?

max_power · May 12, 2009

I added within the function requestInfo(url,id,redirectPage) and it came up with an alert saying [object].

I have js enabled, I double checked.

max_power · May 12, 2009

If you wanna try and run + test it on your comp, here are the source files:

http://www.2shared.com/file/5736708/d8a9b83/current_events.html

You must have usual services running for the server side as you would probably know..

JonnoTheDev · May 12, 2009

I use IE 8.

The alert suggests you have an Ajax object. Your functions must be using unsupported methods. I would carefully debug your functions to check that the correct data is available within.

max_power · May 12, 2009

Could you please check if it works on IE 8?

When you say unsupported methods, what do you mean by that? Do you mean the PHP code or the javascript code?

Thanks.

JonnoTheDev · May 12, 2009

Javascript

Sorry I haven't the time to install and test your code. If it is possible to post the current URL I could test.

Sign In

AJAX/JS/PHP/MySQL works in Firefox but not in IE.

Recommended Posts

max_power

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

max_power

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

max_power

Link to comment

Share on other sites

max_power

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

max_power

Link to comment

Share on other sites

JonnoTheDev

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information