Chat App with XMLhttp request not working

X-ray · #1 01-27-2006, 12:42 AM

Hi all,

I've upped this project of mine to make it possible for you guys to see what's wrong. the idea is to have a page refreshed every 3 seconds but when I use
element.innerHTML = xmlhttp.responseXML;
it say's Loading... and then returns an empty page
when I use:
element.innerHTML = xmlhttp.responseTXT;
it displays "undefined"
when I watch the source of the frame though the html tags are there really!
how can I fix this?

this is the script:
(I'm trying to keep it as simple as possible)
script.js

Code:

var xmlhttp=false; 
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
  xmlhttp = new XMLHttpRequest(); 
} 

function loadFragmentInToElement(fragment_url, element_id) { 
    var element = document.getElementById(element_id); 
    element.innerHTML = 'Loading ...'; 
    xmlhttp.open("GET", fragment_url); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      element.innerHTML = xmlhttp.responseXML; 
      } 
    } 
    xmlhttp.send(null);
    window.setTimeout("loadFragmentIntoElement('chat.php','chatBody')", 1000);
}

this is the source of chat.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<script type="text/javascript">
function goToBottom(){
window.scroll(0,1000);
}
</script>
<script type="text/javascript" src="script.js"></script>
</head>
<body style="margin:3px;" onLoad="goToBottom();loadFragmentInToElement('chat.php', 'Chat');">
<div id="Chat" name="Chat">
<?PHP
db_connect("jvdev_be_-_chess","SELECT * FROM chat ORDER BY Id ASC");
if($amount < 1){
	echo "
	Nothing has been said yet! <br />Grab the opportunity :D
	";
}
else{
	echo "
	<table style=\"width:100%;border-width:0px;\" cellspacing=\"0\">
	";
	$clr = "#999999";
	while($dbRow = mysql_fetch_assoc($dbResult)){
		if(!isset($dbRow['Color'])){
			$color="black";
		}
		else{
			$color = $dbRow['Color'];
		}
		echo "
		<tr><td style=\"width:100px;background-color:$clr;\">{$dbRow['Name']}</td><td style=\"background-color:$clr;\"><span style=\"color:#$color\">{$dbRow['Content']}</span></td></tr>
		";
		$last = $dbRow['Date'];
		if($clr == "#999999"){
			$clr = "#FFFFFF";
		}
		else{
			$clr = "#999999";
		}
	}
	echo "
	</table>
	<div name=\"bottom\" style=\"color:#666666;text-align:right;\">Last message: $last</span>
	";
}
?>
</div>
</body>
</html>

Could this have anything to do with the DOCTYPE?

X-ray · #2 01-27-2006, 02:12 AM

Hmm, after some modifications i've got another error...

in FF: element has no properties...

the script:

Code:

if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
  xmlhttp = new XMLHttpRequest(); 
} 

function loadFragmentInToElement(fragment_url, element_id) { 
    var element = document.getElementById(element_id); 
    element.innerHTML = 'Loading ...'; 
    xmlhttp.open("GET", fragment_url); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      element.innerHTML = xmlhttp.responseXML; 
      } 
    } 
    xmlhttp.send(null);
    window.setTimeout("loadFragmentInToElement('chat.php','Chat')", 1000);
} 

window.onLoad = loadFragmentInToElement('chat.php','Chat');

Chat is an existing div element:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="script.js"></script>
</head>
<body style="margin:3px;">
<div id="Chat">
Some PHP code here
</div>
</body>
</html>

Ultimater · #3 01-27-2006, 02:31 AM

window.onLoad = loadFragmentInToElement('chat.php','Chat'); will be executed without waiting for the onload event handler. Try this:

Code:

window.onload = function(){loadFragmentInToElement('chat.php','Chat')};

X-ray · #4 01-27-2006, 02:36 AM

myeah that wasn't really the error....
this line gives errors:

var element = document.getElementById('chat');

it has no properties according to FF
and "null" is null or not an object in IE

can anybody think of a reason?

thanks

EDIT: just to state the obvious:
the <div id="chat"> DOES exist

I left out the name="chat" because that gives errors in the W3C validator

Ultimater · #5 01-27-2006, 02:55 AM

Try passing a third argument:

Code:

xmlhttp.open("GET", fragment_url, true);

X-ray · #6 01-27-2006, 03:03 AM

Quote:

Originally Posted by Ultimater

Try passing a third argument:

Code:

xmlhttp.open("GET", fragment_url, true);

ah great... now I got rid of that error,
and there's another one....

xmlhttp.responseXML doesnt seem to return anything
(and when I try responseTXT it says undefined...)

where are the Ajax guru's out there?

Ultimater · #7 01-27-2006, 03:06 AM

Have you tried xmlhttp.responseText?

X-ray · #8 01-27-2006, 03:18 AM

omg, you must be... an angel!

ok now it works in firefox but IE still gives error...

object doesn't support this property or method (line 25...)

line 25... that doesn't make any sense, there's not even JS in there :X

and also I want it to scroll down the page all the time... how would you do that?
window.scroll(0,1000); doesnt work when I put it there:

Code:

if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
  xmlhttp = new XMLHttpRequest();
} 

function loadFragmentInToElement(fragment_url) { 
    var element = document.getElementById('chat'); 
    element.innerHTML = 'Loading ...'; 
    xmlhttp.open("GET", fragment_url, true); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      element.innerHTML = xmlhttp.responseText; 
      } 
    } 
    xmlhttp.send(null);
    window.scroll(0,1000);
    window.setTimeout("loadFragmentInToElement('chat.php')", 3000);
} 


window.onload = function(){loadFragmentInToElement('chat.php')};

Ultimater · #9 01-27-2006, 03:22 AM

Get rid of:

Code:

if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
  xmlhttp = new XMLHttpRequest(); 
}

and use:

Code:

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch (e) {
		xmlhttp=false;
	}
}
if (!xmlhttp && window.createRequest) {
	try {
		xmlhttp = window.createRequest();
	} catch (e) {
		xmlhttp=false;
	}
}

in a JS external file, http://jibbering.com/2002/4/httprequest.html , IE doesn't understand the XMLHttpRequest method.

X-ray · #10 01-27-2006, 03:26 AM

but why? is that a way for IE to annoy ppl?
I mean... I don't feel like making my page W3C invalid for bloody IE

is there a way around this?

btw: thank you a lot...
I had that code commented... seems to work better, now I can see the
entries in IE, but I still can reload the ?

Ultimater · #11 01-27-2006, 03:30 AM

It is a cross-browser way, including IE, to set the xmlhttp user-defined varaible to the XMLHttpRequest object.

X-ray · #12 01-27-2006, 03:33 AM

that's not what I meant...
I meant: "why does IE not recognise XMLhttp in external .js files?"
and that's what's bothering me

is there a way around that?

Ultimater · #13 01-27-2006, 03:39 AM

IE understands it, have you tested it online with IE?

Also, your scrolling functionality:

Code:

window.scroll(0,1000);

Will scroll to the exact coords the first time, and the exact same coords the second time.

If you want it to scroll gradually, a bit at a time scrolling lower and lower, then you'd want to use the scrollBy method instead:

Code:

window.scrollBy(0,1000);

However, 1000 pixels at a time is allot of page, try starting with 100:

Code:

window.scrollBy(0,100);

X-ray · #14 01-27-2006, 03:53 AM

aargh...

how did I mess this up?

http://www.jvdev.be/chess/
could you take a look? (click Chat to open popup)

thank you

Ultimater · #15 01-27-2006, 04:05 AM

Edit: http://www.jvdev.be/chess/chat/chat.php and change:

Code:

<script type="text/javascript" src="script.js"></script>

into:

Code:

<script type="text/javascript" src="httprequest.js"></script>
<script type="text/javascript" src="script.js"></script>

(adding the httprequest.js file prior to it)

And change your scripts to look as follows:
script.js

Code:

function loadFragmentInToElement(fragment_url) {
if(!xmlhttp){alert("Non compatible browser for XMLHttpRequest object!");return false;}
    var element = document.getElementById('chat'); 
    xmlhttp.open("GET", fragment_url, true); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      element.innerHTML = xmlhttp.responseText; 
      window.scroll(0,1000);
      } 
    } 
    xmlhttp.send(null);
    window.setTimeout("loadFragmentInToElement('chat.php')", 1000);
} 

window.onload = function(){loadFragmentInToElement('chat.php')};

httprequest.js

Code:

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch (e) {
		xmlhttp=false;
	}
}
if (!xmlhttp && window.createRequest) {
	try {
		xmlhttp = window.createRequest();
	} catch (e) {
		xmlhttp=false;
	}
}

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)