AJAX / XMLHttpRequest working in all browsers except firefox. Please Help

[T.Cavanagh]

Hi i am new to AJAX but i havejust managed to write one of my first basic scripts.

What it does is takes all the news items out of a database and lists them as links. When you click a link i want all of the data that is linked to that news item to display underneath.

Now i have got this to work except it will not work in Firefox, all other browsers it is fine.

Below is the code i have written,

<script>
<!--
var xmlHttp = XMLHttpRequest();

function submitSelection() {
	
	if (event.keyCode==13) {
		alert(event.keyCode);
	}
}

function showResult(str) {

	if (event.keyCode==40) {
		document.getElementById("news_details").focus();
	} else {
	
	if (str.length==0)	{ 
		document.getElementById("news_details").innerHTML="";
		document.getElementById("news_details").style.border="0px";
		return;
	}
	
	xmlHttp=GetXmlHttpObject()
	
	if (xmlHttp==null) {
		alert ("Browser does not support HTTP Request");
		return;
	}
	
	var url="ajax_tom_server_script.asp";
	url=url+"?news_id="+str;
	xmlHttp.onreadystatechange=stateChanged ;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	}
} 

function stateChanged() { 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 

		document.getElementById("news_details").innerHTML=xmlHttp.responseText;
//		document.getElementById("customer_search_results").focus();
	} 
}

function GetXmlHttpObject() {
	var xmlHttp=null;
	if (window.XMLHttpRequest){
        try{
            xmlHttp = new XMLHttpRequest();
        }catch (e){
            xmlHttp = false;
        }
    }else if (window.createRequest){
        try{
            xmlHttp = new window.createRequest();
        }catch (e){
            xmlHttp = false;
        }
    }else if (window.ActiveXObject){
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                xmlHttp = false;
            }
        }
    }
    
    return xmlHttp;
}
-->
</script>
<%
	Set rs_list = server.CreateObject("ADODB.Recordset")
	
	sSQL = "SELECT * FROM news WHERE deleted <> 1"
	Set rs_list = conn_tom.Execute(sSQL)
	
	if rs_list.eof then
		response.Write("No News")
	else
		do while not rs_list.eof
			id = rs_list.fields("news_id")
			response.Write("<a href='#' onclick='javascript:showResult(" & id & "); return false'>" & rs_list.fields("news_title") & "</a>")
		rs_list.movenext
		loop
	end if
	
%>


<div id="customers_search">

<div id="news_details"></div>


</div>

Could anyone please help. Thanks in advance.

[essential]

This LINK will provide you brief information--on how to handle XMLHttpRequest in Firefox browser.

[T.Cavanagh]

Thank you for your reply.

I have gone over that and all different ones on the internet.

my GetXmlHttpObject function is the bit that i thought was wrong as it works in other browsers but i changed it to pretty much the same as on your link just with a few variables changed and i still get nothing on firefox.

Do you know which part of my script is wrong?

Thanks

[essential]

Try this out:

<script type="text/javascript">
<!--
var GetXmlHttpObject, stateChange, str;
str = null;
var xmlHttp;

// Your other function goes here.

stateChange = function() {
   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
   (( document.getElementById ) ? document.getElementById("news_details").innerHTML = xmlHttp.responseText : document.all.news_details.innerHTML = xmlHttp.responseText );
   (( document.getElementById ) ? document.getElementById("customer_search_results").focus() : document.all.customer_search_results.focus());
   } 
};

GetXmlHttpObject = function( url ) {
   xmlHttp = null;
   url = (( url !== null ) ? url : "ajax_tom_server_script.asp?news_id=" + (( str !== null ) ? str : "" )); 
   try { 
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();      
      }
      else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( e ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( er ) {
      try {
         if ( window.createRequest ) {
         xmlHttp = window.createRequest();
         }
      } catch( err ) {
      xmlHttp = null;
      }
   } 
   if ( xmlHttp !== null ) {
      xmlHttp.onreadystatechange = stateChange;
      xmlHttp.open("GET", url, true);
      xmlHttp.send( null );
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
   }
};

// -->
</script>

[T.Cavanagh]

Thanks for your reply again,

That seemed to get it to work in firefox except now when i click one of the links that i have made with the below code i just get page not found, is there a way i check which page is being called as i am guessing it is incorrectly laid out.

do while not rs_list.eof
			id = rs_list.fields("news_id")
			response.Write("<a href='#' onclick='javascript:GetXmlHttpObject(" & id & "); return false'>" & rs_list.fields("news_title") & "</a>")
		rs_list.movenext
		loop

[essential]

Sorry if missed those line's, please reconsinder all this changes:

<script type="text/javascript">
<!--
var GetXmlHttpObject, stateChange, submitSelection;
var xmlHttp;

submitSelection = function() {
   if ( event.keyCode == 13 ) {
      alert( event.keyCode );
   }
};

stateChange = function() {
   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
   (( document.getElementById ) ? document.getElementById("news_details").innerHTML = xmlHttp.responseText : document.all.news_details.innerHTML = xmlHttp.responseText );
   (( document.getElementById ) ? document.getElementById("customer_search_results").focus() : document.all.customer_search_results.focus());
   } 
}; 

GetXmlHttpObject = function( str ) { 
   if ( event.keyCode === 40 ) {
   (( document.getElementById ) ? document.getElementById("news_details").focus() :  document.all.news_details.focus());
   } else {
      if ( str.length === 0 ) {
      (( document.getElementById ) ? document.getElementById("news_details").innerHTML = "" : document.all.news_details.innerHTML = "" );
(( document.getElementById ) ? document.getElementById("news_details").style.border = "0px" :  document.all.news_details.style.border = "0px" );
      return;
      }
   xmlHttp = null;
   url = "ajax_tom_server_script.asp?news_id=" + str; 
   try { 
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();      
      }
      else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( e ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( er ) {
      try {
         if ( window.createRequest ) {
         xmlHttp = window.createRequest();
         }
      } catch( err ) {
      xmlHttp = null;
      }
   } 
   if ( xmlHttp !== null ) {
      xmlHttp.onreadystatechange = stateChange;
      xmlHttp.open("GET", url, true);
      xmlHttp.send( null );
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
      }
   }
};

// -->
</script>

Now you can make your AJAX call again, doing your last posted code. Hope it solves the issue...