Simple AJAX Problem

[miffe]

Greetings,I have a small incompatibility with the next code, I've looked for solutions and as far as I am concerned the follwing was an adecuate one as I am verifying if user has IE or FF or others, and if he has IE I use the correct method, but it still doesn't work. When I run the system in IE6 it crashes with a JS error... the error comes up exactly here:document.getElementById("txtHint").innerHTML=xmlHttp.responseTextThis is the code I used in the .JS file:

var xmlHttp;function showResults(str,str2,str3){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("El navegador no permite el uso una funcion requerida. Active JavaScript. Se requiere IE5+ o FireFox2+ minimo."); return; } var url="ajaxActividades.php"url=url+"?BidProyecto="+strurl=url+"&BidEstatus="+str2url=url+"&BidCategoria="+str3xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

Thanks a lot and I hope someone can help me out with this one, it's been giving me a headache Miffe

[Ingolme]

I don't know if this is the problem but this is going to run the same statement twice and I don't think any responseText is give on readystate "complete"

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}

How about just doing this?:

if (xmlHttp.readyState==4){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}

[miffe]

I don't know if this is the problem but this is going to run the same statement twice and I don't think any responseText is give on readystate "complete"

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}

How about just doing this?:

if (xmlHttp.readyState==4){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}

Thanks for your reply, Tails.I don't think this would affect it in any way because there is an OR sign. So it would go in either way. This is a standard AJAX technique, I think I even got the code from somewhere on this forum.It used to work with me before, but somehow it's giving me problems now.Any other ideas?

[justsomeguy]

How about saying what the error message is? You can install DebugBar for IE if you want a more descriptive message.Also, this topic should probably be moved to the Javascript forum.

[killboy]

Would you mind giving us the whole code??I think that the error is that you don't have an element with id="txtHint"

Also, this topic should probably be moved to the Javascript forum.

I second that

[miffe]

Sorry guys,I should have posted it in the JS forum, sorry about that. As I am coding in PHP I thought it should go in the PHP forum, but in the end its JS+PHP.

I think that the error is that you don't have an element with id="txtHint"

I do have the element, I will post the full code in a moment. First of all, I installed debugbar as you suggested so I could view the error more clearly. Here it is:Line: 25Character: 2Code: 0Error Message: Unknown runtime errorURL: http://localhost/ablog/actividades.phpThe error occurs exactly in the line I had posted before.Here is the PHP Code for the page where I make the call and show the "results" (I'll just post one of the dropdowns for convenience, there is 3 in total):

<?php	//ajaxActividades.js will be posted in the next section	echo "		<script src='ajaxActividades.js'></script>		<script type='text/javascript' LANGUAGE='javascript'>		<!--		function ReloadTextDiv()		{			var n1 = document.getElementById('BidProyecto').value;			var n2 = document.getElementById('BidEstatus').value;			var n3 = document.getElementById('BidCategoria').value;			showResults(n1,n2,n3);		}		//-->		</script>";echo "<br><form action='actividades.php' method='post'>";						echo "Filtrar: ";												echo "<SELECT class='formdropdown' id='BidProyecto' name='BidProyecto' STYLE='width: 180px'							onchange='ReloadTextDiv()' onkeyup='ReloadTextDiv()'>";						include("resources/config.php"); //connectarse a la base de datos						$result = mysql_query("SELECT * FROM proyectos WHERE activo = 1 ORDER BY proyecto;");						echo "<OPTION value='0'>Todos los Proyectos</OPTION>";						$y = 0;						  while($row = mysql_fetch_array($result))						  {							$idReg = $row['idProyecto'];							$nombre = $row['proyecto'];							if ($_POST["BidProyecto"] == $idReg)								echo "<OPTION value='". $idReg . "' SELECTED>". $nombre ."</OPTION>";							else if ($_POST["BidProyecto"] == "" && $_COOKIE["BidProyecto"] == $idReg)								echo "<OPTION value='". $idReg . "' SELECTED>". $nombre ."</OPTION>";							else								echo "<OPTION value='". $idReg . "'>". $nombre ."</OPTION>";							$y++;						  }						echo "</SELECT>";//Show DataGrid:						echo "<span id='txtHint'>[Results]</span>";						echo "<br>";?>

The following is the JS code I had posted earlier:

var xmlHttp;function showResults(str,str2,str3){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("El navegador no permite el uso una funcion requerida. Active JavaScript. Se requiere IE5+ o FireFox2+ minimo."); return; } var url="ajaxActividades.php"url=url+"?BidProyecto="+strurl=url+"&BidEstatus="+str2url=url+"&BidCategoria="+str3xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

And finally... the page that gets called from the JS file:

<?php	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */	//	Posteo de Headers (Cookies)	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */						if ($_GET["BidProyecto"] != "")		setcookie("BidProyecto", $_GET["BidProyecto"], 60*60*6+time());	if ($_GET["BidEstatus"] != "")		setcookie("BidEstatus", $_GET["BidEstatus"], 60*60*6+time());	if ($_GET["BidCategoria"] != "")		setcookie("BidCategoria", $_GET["BidCategoria"], 60*60*6+time());//....blablabla... goes on and on... unnecessary code to post here

Anyway if you wish to move this to the JS forum go ahead, I think I do not have privileges to do so.Thanks a lot for your help guys, still can't figure this one out.- miffe

[Ingolme]

Try opening the site with Firefox and view the Error Console (Tools>Error console)

[killboy]

You forgot to put the ";" in all this part:

var url="ajaxActividades.php"url=url+"?BidProyecto="+strurl=url+"&BidEstatus="+str2url=url+"&BidCategoria="+str3xmlHttp.onreadystatechange=stateChangedxmlHttp.open("GET",url,true)xmlHttp.send(null)function stateChanged(){if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}}

The code should be:

var url="ajaxActividades.php";url=url+"?BidProyecto="+str;url=url+"&BidEstatus="+str2;url=url+"&BidCategoria="+str3;xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);function stateChanged(){if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")	document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}

[Ingolme]

You forgot to put the ";" in all this part:

var url="ajaxActividades.php"url=url+"?BidProyecto="+strurl=url+"&BidEstatus="+str2url=url+"&BidCategoria="+str3xmlHttp.onreadystatechange=stateChangedxmlHttp.open("GET",url,true)xmlHttp.send(null)

In Javascript that doesn't make a difference.

[killboy]

In Javascript that doesn't make a difference.

Really? Cuz I don't see another cause why it should give the error at that point.Okay, it could be another crazy theory, but I think it could be becuz of all the echo in the first PHP page:

echo "<span id='txtHint'>[Results]</span>";echo "<br>";

[miffe]

Try opening the site with Firefox and view the Error Console (Tools>Error console)

Hmm... The site works fine in FF, heheh... that wouldn't give me any error at all That's why I made the post in the first place, because in IE it's not working.

In Javascript that doesn't make a difference.

Yep, in JS it doesnt matter if I use ; or not, otherwise why would it work in FF?

Really? Cuz I don't see another cause why it should give the error at that point.Okay, it could be another crazy theory, but I think it could be becuz of all the echo in the first PHP page:

echo "<span id='txtHint'>[Results]</span>";echo "<br>";

Nope... when I ECHO a SPAN with id txtHint, this allows me to update whats inside of txtHint using the .innerHTML in javascript. I just can't find what's messing it up. I guess this should be in the JS forum as you all said, but who can move the topic for me?thx,miffe

[killboy]

Well, have you tried Ingolme's first advice??

I don't know if this is the problem but this is going to run the same statement twice and I don't think any responseText is give on readystate "complete"

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}

How about just doing this?:

if (xmlHttp.readyState==4){document.getElementById("txtHint").innerHTML=xmlHttp.responseText}

I mean, I remember that I received that runtime error once, and it was because IE didn't support some tags.Maybe IE doesn't support the readyState="complete"

[miffe]

Well, have you tried Ingolme's first advice??I mean, I remember that I received that runtime error once, and it was because IE didn't support some tags.Maybe IE doesn't support the readyState="complete"

Tried it, didn't work. It's some problem with the line below that one: document.getElementById("txtHint").innerHTML=xmlHttp.responseTextfails to work in IE.

[justsomeguy]

Split it up into more then one line and see which one is the problem if it still gives an error.var el = document.getElementById("txtHint");var rt = xmlHttp.responseText;el.innerHTML = rt;

[miffe]

Split it up into more then one line and see which one is the problem if it still gives an error.var el = document.getElementById("txtHint");var rt = xmlHttp.responseText;el.innerHTML = rt;

Same error...Line: 56Character: 4Code: 0Error Message: Unknown runtime errorURL: http://localhost/ablog/actividades.phpLine 56:

el.innerHTML = rt;

Can't find much info about this problem on the net, there is info about incompatibility with the xmlhttp between IE and FF/Opera/etc but I can't find a real way how to solve it.

[jesh]

There's really only two things that could be happening at this point:1) the DOM is unable to get the element "txtHint" by id and when you attempt to access the innerHTML property of that element, there's an error2) the xmlHttp object isn't loaded and the script blows up when you attempt to access the responseText property.Most likely, it's the second one since this is working for you in Firefox. You might try changing your GetXmlHttpObject function. I've been using this without any problems:

	function GetHttpRequestObject()	{			var object = false;		if(window.XMLHttpRequest)		{			object = new XMLHttpRequest();		}		else if(window.ActiveXObject)		{			try			{				object = new ActiveXObject("Msxml2.XMLHTTP");			}			catch(e)			{				try				{					object = new ActiveXObject("Microsoft.XMLHTTP");				}				catch(e)				{				}			}		}		return object;	}

[miffe]

Thanks a lot Jesh for your help so far... and all the other guys as well, I really appreciate it.1. I deleted the .JS file and included the code directly in the same PHP to make it less troublesome editing it.2. I changed the GettHttpRequestObject to Jesh's one.Unfortunately I still get the same error in the same line, while trying to load the xmlhttp object... Going to try some debugging meanwhile, anyone else have a clue about what it may be?

[justsomeguy]

That doesn't make a whole lot of sense at this point, you're just assigning a string to an element's property. Use some alerts to find out what is going on. Does responseText exist, are you sending back an XML response or a text response? IE might blow up if you try to assign an undefined value as innerHTML, I'm not sure.var el = document.getElementById("txtHint");alert("el: " + el); // show something like "span element"alert("el.innerHTML: " + el.innerHTML);var rt = xmlHttp.responseText;alert("rt: " + rt);el.innerHTML = rt;alert("done");

[miffe]

That doesn't make a whole lot of sense at this point, you're just assigning a string to an element's property. Use some alerts to find out what is going on. Does responseText exist, are you sending back an XML response or a text response? IE might blow up if you try to assign an undefined value as innerHTML, I'm not sure.var el = document.getElementById("txtHint");alert("el: " + el); // show something like "span element"alert("el.innerHTML: " + el.innerHTML);var rt = xmlHttp.responseText;alert("rt: " + rt);el.innerHTML = rt;alert("done");

el: [object]el.innerHTML: [resultados]rt: <br><center><div id='tablecss'><tabl.......... (about 150 lines)Then the same error alert comes up and I never get a "Done" alert.I guess the problem must be with "el" right because it should be a span element and not an object?

[justsomeguy]

No that's fine, if it's printing the value of el.innerHTML then it's fine. I wonder if IE has an issue with the length of the response text. Try to insert only the first 200 characters.var el = document.getElementById("txtHint");alert("el: " + el);alert("el.innerHTML: " + el.innerHTML);var rt = new String(xmlHttp.responseText);rt = rt.substr(0, 200);alert("rt: " + rt);el.innerHTML = rt;alert("done");

[miffe]

No that's fine, if it's printing the value of el.innerHTML then it's fine. I wonder if IE has an issue with the length of the response text. Try to insert only the first 200 characters.var el = document.getElementById("txtHint");alert("el: " + el);alert("el.innerHTML: " + el.innerHTML);var rt = new String(xmlHttp.responseText);rt = rt.substr(0, 200);alert("rt: " + rt);el.innerHTML = rt;alert("done");

OK This is crossing the border of ridiculous now... I tried your code and it still failed, though when I equaled rt to "ok" it worked... here is the code:

			var rt = new String(xmlHttp.responseText);			rt = rt.substr(0, 12);			//rt = 'ok';			alert('rt: ' + rt);

It is crashing in the same line: "el.innerHTML = rt;"the text outputed by the first 12 characters of rt is <br><center>... so logically... I tried equaling rt to '<br><center>' and it crashed again!I tried <br> alone and it worked... but when I try rt = '<br><center>'; it crashes.any ideas?

[miffe]

OK This is crossing the border of ridiculous now... I tried your code and it still failed, though when I equaled rt to "ok" it worked... here is the code:

			var rt = new String(xmlHttp.responseText);			rt = rt.substr(0, 12);			//rt = 'ok';			alert('rt: ' + rt);

It is crashing in the same line: "el.innerHTML = rt;"the text outputed by the first 12 characters of rt is <br><center>... so logically... I tried equaling rt to '<br><center>' and it crashed again!I tried <br> alone and it worked... but when I try rt = '<br><center>'; it crashes.any ideas?

Found the problem! ... I think.as i am using single apostrophes ' as outer quotes I can't include anything with single apostrophes inside... when I tried<br><font face='arial'>asd</font> it obviously failed... but when i did <br><font face='arial'>asd</font> it worked.Is there a way in JS to quickly replace one character in a whole string like the similar php command?*EDIT*: .replace(old,new) should work but how would I replace apostrophes for ' when placing an apostrophe will exit the sequence?

[jeffman]

Uh . . . have you tried an escape sequence?

[miffe]

Uh . . . have you tried an escape sequence?

Just tried .replace(/'/,''') no error (apparently, unless my debugger just broke), but no result, and it breaks before the next alert.Code:

		function stateChanged() 		{ 		if (xmlHttp.readyState==4 || xmlHttp.readyState=='complete')		 { 			var el = document.getElementById('txtHint');			var rt = new String(xmlHttp.responseText.replace(/'/, '''));			alert('rt: ' + rt);			el.innerHTML = rt;			alert('done');		 } 		}

[Ingolme]

Why not try .replace(/'/g,"\\\'") instead.