Chat box and IM system

[Synook]

I'll test the functions when I get home (about 3 hours).With the definite height division, give it properties e.g. like this:

div#messages {	height:300px;	overflow:auto;	border:1px solid #999; /* Border optional */}

[Synook]

Ah finally.I was sending the wrong content-type, it is supposed to be

postHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

[shadowayex]

Sends now. But if I send a message, it will show up on here the first time. Then after that, it posts the message, but I have to refresh to see them. And if I send from another computer, it won't show. So that tells me the get_messages() function or the setInterval() aren't working. I'm sorry if I'm being a pain, but this is pretty important to my friends and I.

[justsomeguy]

That sounds about right, either the interval isn't firing or the get_messages function isn't returning anything. First, you should be using Firefox with Firebug enabled for testing for some decent debugging capabilities. Add an alert to whatever the interval is running to make sure that's it working. If it is, then you should see the alert pop up every time the interval fires. If that's not working then that should give you a starting point to look for problems. If that is working, then look elsewhere. For the get_messages function, you can use Firebug to monitor the requests going out, there is a tab for XHR on the Net tab that will show XMLHttpRequests and the responses from the server. You should be able to use that to test if the requests are going out and if the server is sending back the correct response.

[Synook]

Do you have a link to your chatroom?

[shadowayex]

Well, it's one of the tools I put on my testing place called testtools.freehostia.com. You have to sign up to use things though. Feel free to, but just know there's nothing to it styling-wise. I use to to build the functioning of things, then I move them to sites when I'm good with them.To justsomeguy:Looked at the Error Console on Firefox and everytime the setInterval is supposed to go, it gives this error:uncaught exception:[Exception..."Component returned failure code:0cx1f30001(NS_ERROR_NOT_INITIALIZED)[nsIXMLHttpRequest.send]" nsresult: "0x1f30001(NS_ERROR_NOT_INITIALIZED)" location:"JS frame :: http://testtols.freehostia.com/chatroom.php :: get_messages :: line 131" data:no]Weird thing is, chatroom.php only has 88 lines to it :/. I don't know what any of that means so...EDIT:I added an alert at the end of the get_messages() function like you said to and it does keep popping up, so the setInterval works. Must be the function.

[Synook]

I tried going to your page but it kept alerting "Sucess!"...

[shadowayex]

I tried going to your page but it kept alerting "Sucess!"...

My bad, I hadn't removed the alert until just now. Sorry. You can try it now.

[Synook]

Oh! Its working, but the division just isn't scrolling down to show the new messages. You'll need to write some JS or something (or invert the conversation order) to fix that. E.g. in the get_messages() function at the end of it

messages = document.getElementById("messages");messages.scrollTop = messages.scrollHeight;

[shadowayex]

Oh! Its working, but the division just isn't scrolling down to show the new messages. You'll need to write some JS or something (or invert the conversation order) to fix that. E.g. in the get_messages() function at the end of it

messages = document.getElementById("messages");messages.scrollTop = messages.scrollHeight;

Maybe it's just my computer or something. Because it's not working. It'll show the new message I type once (which I do have to scroll down to see) then after that it does not show a new message until I refresh it. It won't show new messages from others at all unless I refresh it. It's the same in IE7 and Firefox (tried them both). And I added the script like you told me to and it doesn't do anything either. I looked in the firebug thing and there's nothing wrong with anything. So I don't know what to do anymore.

[Synook]

Whoops that was supposed to be

messages = document.getElementById("message");messages.scrollTop = messages.scrollHeight;

Umm... I don't know, the chatroom is working completely for me - try on another computer.

[shadowayex]

I tried it on my other computer, but I don't trust it much considering it took me a good while just to get the page to show up. THen I tried it on a friend of mine's computer, which is a Vista. Mine are both XP Home. Tried in IE7 on all three and Firefox on this one. All of them do the same thing. Sends the message and shows it the first time I send. Then after that, nothing. And nothing at all when it comes to someone else posting. Unless of course I refresh. Then I see it all. Is there some kind of browser setting that may be giving me this problem?EDIT: Works on Firefox now. I was messing with the interval and it started working . I think I should mention that in IE works once every refresh, not just once period. For me. What are you using? (Browser, OS, anything that has an effect)Another note: THANK YOU FOR ALL YOUR TIME AND EFFORT!!!! If you don't mind, I'll probably give you credit for this whole thing when I get the site actually going. Right now, as I said, it's just on a little testing site deal I build all my tools on to start. When the site gets up and going, I'll be moving. I'll let you know what the site is when I get it started (the club hasn't decided on a site name yet, hence why the site isn't going yet )

[Synook]

I think I know what is the problem - if the get or post takes to long to respond because we are not creating new instances of the XMLHttpRequest object the current instance is overwritten, the readyState resets, the response isn't written, and the whole thing seizes up. I haven't tried fixing it yet, but if you want to have a go try just moving everything into the functions so there are no global vars.

[shadowayex]

I haven't tried fixing it yet, but if you want to have a go try just moving everything into the functions so there are no global vars.

I tried it, but I'm not sure how to make it so there's no globals because of these two lines:

getHttp.onreadystatechange = function() { if (getHttp.readyState == 4) document.getElementById("message").innerHTML = getHttp.responseText;}postHttp.onreadystatechange = function() { //You want the message box to be instantly updated when they post. Lag less if (postHttp.readyState == 4) document.getElementById("message").innerHTML = postHttp.responseText;}

Those two are the first two functions after the variables are created. They use the variables so if I move the variables into the get_messages() and send_messages() function, it gives me the error "getHttp is not defined" or "postHttp is not defined"EDIT: After trying different things without success, I put everything back how it was, but now it doesn't work in Firefox T_T. I'm going to guess I'm just having rotten luck. NEW DISCOVERY: It works in Firefox IF and ONLY IF I have firebug running. Why this is, I don't know. Any ideas why?

[TehBlizzy]

getHttp.onreadystatechange = function() {if (getHttp.readyState == 4) document.getElementById("message").innerHTML = getHttp.responseText;}postHttp.onreadystatechange = function() {//You want the message box to be instantly updated when they post. Lag lessif (postHttp.readyState == 4) document.getElementById("message").innerHTML = postHttp.responseText;}

It seems you are forgetting the brackets for the 'ifs'...Try:

getHttp.onreadystatechange = function() {if (getHttp.readyState == 4) {document.getElementById("message").innerHTML = getHttp.responseText;}}postHttp.onreadystatechange = function() {//You want the message box to be instantly updated when they post. Lag lessif (postHttp.readyState == 4) {document.getElementById("message").innerHTML = postHttp.responseText;}}

[Ingolme]

It seems you are forgetting the brackets for the 'ifs'...

The if() command doesn't necessarily need braces. THe following is perfectly correct:if(X == 5) doSomething();

[shadowayex]

But what I don't understand is why it works with Firebug enabled and not with it disabled. Whatever Firebug is doing that makes it work, I need to add to my script then it should be good.

[Ingolme]

Turn off Firebug and check the error console instead to see what it tells you.

[shadowayex]

Error: uncaught exception: [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: http://testtools.freehostia.com/chatroom.php :: get_messages :: line 133" data: no]The thing is, there's not that many lines in the code. There's 93 lines. So I don't know what to do.

[justsomeguy]

It specifies get_messages and XMLHttpRequest.send, there's probably something going on there. I'm not sure why the object would not be initialized, but it gives you something to go on.

[shadowayex]

It specifies get_messages and XMLHttpRequest.send, there's probably something going on there. I'm not sure why the object would not be initialized, but it gives you something to go on.

It's a start. But can you tell me why it doesn't mess up when Firebug is enabled?Also the code for get_messages() is this:

function get_messages() { getHttp.open("GET", "chat_get_messages.php"); getHttp.send(null); messages = document.getElementById("message"); messages.scrollTop = messages.scrollHeight;}

[justsomeguy]

First, when you open a connection you will want to send the third argument as true so that the request is asynchronous. I'm not sure what the default value there is.getHttp.open("GET", "chat_get_messages.php", true);This might be caused by the AJAX requests going out in a loop with the same object. Try to just run the request once without the loop and see if you get the same error. You might need to recreate the AJAX object every time you want to send a request. You can use a function like this to create a new AJAX object:

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

[shadowayex]

I'm not sure where to put that. Here's my whole javascript code:

var getHttp;var postHttp;try { // Firefox, Opera 8.0+, Safari getHttp=new XMLHttpRequest();}catch (e) { //Internet Explorer try {  getHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {  getHttp=new ActiveXObject("Microsoft.XMLHTTP"); }}try { // Firefox, Opera 8.0+, Safari postHttp=new XMLHttpRequest();}catch (e) { //Internet Explorer try {  postHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {  postHttp=new ActiveXObject("Microsoft.XMLHTTP"); }}getHttp.onreadystatechange = function() { if (getHttp.readyState == 4) {  document.getElementById("message").innerHTML = getHttp.responseText; }}postHttp.onreadystatechange = function() { //You want the message box to be instantly updated when they post. Lag less if (postHttp.readyState == 4) {  document.getElementById("message").innerHTML = postHttp.responseText; }}function get_messages() { getHttp.open("GET", "chat_get_messages.php", true); getHttp.send(null); messages = document.getElementById("message"); messages.scrollTop = messages.scrollHeight;}function send_message() { postHttp.open("POST", "chat_send_messages.php", true); postHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded"); data = "message=" + document.getElementById("input").value; document.getElementById("input").value = ""; postHttp.setRequestHeader("content-length", data.length); postHttp.send(data); return false;}window.onload = function() { setInterval("get_messages()", 1000);}

EDIT: When I added the third arguement, it started erroring even with Firebug on. The error is:uncaught exception: [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: java script: eval(__firebugTemp__); :: anonymous :: line 1" data: no]But once I take the arguement back out, it works perfectly in Firefox with Firebug on, but not with Firebug disabled. Can someone explain this to me? Because whatever Firebug is doing, I need to make happen within the code so it works all around.

[justsomeguy]

Instead of removing the attribute and relying on the default value, change it between true and false and see if the behavior changes.You would use the function above whenever you send a request out, instead of creating the 2 AJAX objects first, assigning callback functions, etc. You would just do all that when you send the request out. e.g.:

function get_messages() {  var xhr = getHTTPObject();  xhr.onreadystatechange = function() {	if (xhr.readyState == 4) {	  document.getElementById("message").innerHTML = xhr.responseText;	}  }  xhr.open("GET", "chat_get_messages.php", true);  xhr.send(null);  messages = document.getElementById("message");  messages.scrollTop = messages.scrollHeight;}

[shadowayex]

It stopped working. I don't know if it's the get_messages() orthe send_messages() or both, but it's not showing anything and it's not posting anything. Here's my new code:

function gethttp() { try {  // Firefox, Opera 8.0+, Safari  getHttp=new XMLHttpRequest(); } catch (e) {  //Internet Explorer  try {   getHttp=new ActiveXObject("Msxml2.XMLHTTP");  }  catch (e) {   getHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }}function posthttp() { try {  // Firefox, Opera 8.0+, Safari  postHttp=new XMLHttpRequest(); } catch (e) {  //Internet Explorer  try {   postHttp=new ActiveXObject("Msxml2.XMLHTTP");  }  catch (e) {   postHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }}function get_messages() { var getHttp = gethttp(); getHttp.onreadystatechange = function() {  if (getHttp.readyState == 4) {   document.getElementById("message").innerHTML = getHttp.responseText;  } } getHttp.open("GET", "chat_get_messages.php"); getHttp.send(null); messages = document.getElementById("message"); messages.scrollTop = messages.scrollHeight;}function send_message() {  var postHttp = posthttp(); postHttp.onreadystatechange = function() {  //You want the message box to be instantly updated when they post. Lag less  if (postHttp.readyState == 4) {   document.getElementById("message").innerHTML = postHttp.responseText;  } } postHttp.open("POST", "chat_send_messages.php"); postHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded"); data = "message=" + document.getElementById("input").value; document.getElementById("input").value = ""; postHttp.setRequestHeader("content-length", data.length); postHttp.send(data); return false;}window.onload = function() { setInterval("get_messages()", 1000);}

There's no third argument right now because I tried both true and false and neither worked, so I tried it without either of them and it still doesn't work. Did I make an error?EDIT: I moved the information fromt he first two functions into the get_messages() and send_messages() and whatnot and it works now, but it inserts out of order. It might have something to do with my PHP code because I added a whole bunch of things to attempt to add a delete option for admins. I don't know though. I'll look through it. If you have any ideas, that would be helpful.