HTML / Javascript chat

[SpOrTsDuDe.Reese]

For the page refresh to be timed. Heres some code:

<script type="text/JavaScript"><!--setTimeout("location.href = 'http://www.gameyin.com';",1500);--></script>

That will just refresh the page every 1.5 seconds.

<script type="text/JavaScript"><!--redirectTime = "1500";redirectURL = "http://www.gameyin.com";function timedRedirect() {	setTimeout("location.href = redirectURL;",redirectTime);}//   --></script><h2 style="background-color:#ffcc00;padding:5px;width:100px;cursor:pointer;"	onclick="java script:timedRedirect()">	Click me for a timed redirect.</h2>

This code will redirect 1 time, and only when you click the link the code generates.

<div align="center"><script LANGUAGE="JavaScript"><!-- Begindocument.write('<form><input type=button value="Refresh" onClick="history.go()"></form>')//  End --></script></div><p><center><font face="arial, helvetica" size"-2">Refresh Time<a href="http://gameyin.com">GameYinGoTHERENOW</a></font></center><p>

This one will is a button that refreshes the page every time you click on it. I would use some of these codes I made. If you don't I will be mad for all the time you had me waste Oh and by the way. I used www.gameyin.com because that's my website

[Synook]

TehBizzy, have you had a look at AJAX yet? I think you will find that using AJAX makes a chat application much smoother. Then you don't have to refresh the (whole) page at all.

[SpOrTsDuDe.Reese]

Oh sure, just discredit all the code I just put up -.-

[justsomeguy]

There are a ton of ways to do anything. You can replace this:<script type="text/JavaScript"><!--setTimeout("location.href = 'http://www.gameyin.com';",1500);--></script>With this:<meta http-equiv="refresh" content="2;url=http://www.gameyin.com">

[TehBlizzy]

I dunno why everyone has suddenly jumped into refreshing the page...-EditNevermind, already got the line thing. I'll look into the AJAX thing

[TehBlizzy]

Well. I've read through the AJAX tutorial like 5 times and it doesn't help me at all. Mostly because it doesn't explain anything useful to what I want to do, at least in a way I understand it.

[justsomeguy]

Now I just need the refresh command

I dunno why everyone has suddenly jumped into refreshing the page...

Let's back up. What problems are you having now?

[TehBlizzy]

I accidentally edited out my refresh problem on my last post...I've already got a refresh button(might remove) and I already have the frame refreshing every 3 sec so I don't need any more refreshing help. I'm just trying to get the PHP script to run only when the user clicks send.

[justsomeguy]

Which PHP script? The script that will accept the user's submission should run if the form that the button is a part of has that script as the action, or you can use AJAX to submit the information to the PHP script behind the scenes without reloading the page that the form was on.

[Synook]

Well. I've read through the AJAX tutorial like 5 times and it doesn't help me at all. Mostly because it doesn't explain anything useful to what I want to do, at least in a way I understand it.

AJAX can be helpful to your chat program by allowing certain parts of your page to refresh asynchroniously of each other. So, say you want the part of the page showing the conversation to refresh every two seconds. Why should the rest of the page, its images, navigation, etcetera, refresh as well? With AJAX, you can asynchroniously request only the conversation part of the page without affecting the rest of the page, and load it smoothly. Similarily, as justsomeguy hinted to, when someone enters a line of conversation and clicks "submit", you can use AJAX to run the PHP script to add his conversation to the file / database without the page reloading. Umm... what don't you understand about AJAX?

[TehBlizzy]

I understand what AJAX can do and it benefits, but the W3 don't go into enough detail for me to grasp how to use it.Basically, when a user just opens the page, the PHP script runs and writes " says: " to the chat file. I tried to make a function out of it and make the form button call it onSubmit and onClick but it doesn't work for me.In a way I just don't get how to 'use' AJAX :S*Out of Randomness, the Random Chat site has 971 hits already*

[justsomeguy]

You need an onclick event for the button to execute some Javascript function. That Javascript function will get all the data you want to submit to the page and format it into a request. The request takes this form:var1=value1&var2=value2&var3=value3etcOnce you build the request you create the AJAX object, for non-IE browsers it is the XMLHttpRequest object. IE has a couple other names for it. The example code on w3schools shows how to get the object. Once you have the object ready you open a connection to your PHP page with XMLHttpRequest.open and then if you are using the POST method you send the request using XMLHttpRequest.send.Before you open the connection you also need to assign a callback function for when the response comes back. Javascript does not wait for the response to come back, it sends the request and then ends. When the response comes back you can define another function to run. The response handler will check the status of the response and if it's completed then you can get whatever the PHP script sent back and decide what to do with it. Normal responses might be error codes that you would check for and give the user a popup saying something failed, or maybe some data that you will use to update something else on the page. In this case the response would probably be the chat log, or more efficiently the part of the chat log that the user hasn't seen yet.In one application I'm making there is a section where the user can add a new row to a database table and it needs to be shown on the page. So clicking the "add" button runs one function which replaces the button with a form that the user fills out. Clicking on the submit button inside that form runs another function which creates the AJAX object and sends the data. When the response comes back a third function gets executed that checks for error codes and adds the new data to the table on the page. So in that case there are 3 functions which get run to add a new item to the database and update the page without reloading anything. You can also reorder the items in the table, so clicking the "down" arrow next to one item will run a function that will send a request to a script that tells it which item you want to move and which direction. The script updates the display orders in the database and then sends back a response code, 0 for success or 1 if there was an error. When the response comes back another Javascript function runs on the page to do the actual move, it swaps the target row with the row right below it. So it's not one function that sends the request and updates the page, those are two separate functions.

[TehBlizzy]

o_oI understand AJAX and how to use it, but the W3 tutorials for AJAX aren't made in a way that I can understand the actual coding very easily, and in a way they are based on a non-submit style of use so that makes it hard to translate between using a submit button and without one.

[justsomeguy]

The submit button is completely irrelevant. The important thing is the Javascript function. You can use a submit button to run it, a link, another element with an onclick event, you can put it in the onload event for the body, you can time it to run 10 seconds after the page loads, you can put it inline somewhere in the page, you can put it in an onchange event for a dropdown, it doesn't matter. The point is to execute the Javascript function, it doesn't matter how you choose to do that. Since most AJAX applications use form data, it makes sense in most cases to have a submit button run the function because people are used to clicking on submit buttons when they fill out a form. If you truly understand AJAX and how to use it then you would realize that it doesn't matter how you run the function to do the work.

[TehBlizzy]

Ok. I get how to call the function and all, but now I've completely confused myself on what to do. All the tutorials are that stupid name & time thing but it deals with *getting* information, not posting it. Basically, I won't learn anything if I don't see the code that I need, so it be alot easier for you or someone to actually put some example AJAX code up that sends the form info to the PHP script. :)Now that I think of it, I've been trying to learn two different languages really fast so thats probaly why I get so confused...

[justsomeguy]

This is the code on the w3schools site:

function ajaxFunction(){  var xmlHttp;  try  {	// Firefox, Opera 8.0+, Safari	xmlHttp=new XMLHttpRequest();  }  catch (e)  {	// Internet Explorer	try	{	  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");	}	catch (e)	{	  try	  {		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");	  }	  catch (e)	  {		alert("Your browser does not support AJAX!");		return false;	  }	}  }    xmlHttp.onreadystatechange=function()  {	if(xmlHttp.readyState==4)	{	  document.myForm.time.value=xmlHttp.responseText;	}  }  xmlHttp.open("GET","time.asp",true);  xmlHttp.send(null);}

The modifications to make are to change the script that gets submitted to, the method, and to build the data string from the form. Then you can change the response handler to do whatever you want, if anything. So this line gets changed:xmlHttp.open("GET","time.asp",true);xmlHttp.open("POST","script.php",true);You also need to add some headers for the post method after opening:xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlHttp.setRequestHeader("Content-length", data.length);I'm not sure what form data you have or what you want to submit to the form, but you need to build the string also.

data = "";data += "val1=" + escape(document.getElementById("val1").value);data += "&val2=" + escape(document.getElementById("val2").value);data += "&val3=" + escape(document.getElementById("val3").value);

Then you send the string using the send method.

function ajaxFunction(){  var xmlHttp;  try  {	// Firefox, Opera 8.0+, Safari	xmlHttp=new XMLHttpRequest();  }  catch (e)  {	// Internet Explorer	try	{	  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");	}	catch (e)	{	  try	  {		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");	  }	  catch (e)	  {		alert("Your browser does not support AJAX!");		return false;	  }	}  }    xmlHttp.onreadystatechange=function()  {	if(xmlHttp.readyState==4)	{	  alert("the response came back:\n" + xmlHttp.responseText);	}  }  data = "";  data += "val1=" + escape(document.getElementById("val1").value);  data += "&val2=" + escape(document.getElementById("val2").value);  data += "&val3=" + escape(document.getElementById("val3").value);  xmlHttp.open("POST","script.php",true);  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  xmlHttp.setRequestHeader("Content-length", data.length);  xmlHttp.send(data);}

[SpOrTsDuDe.Reese]

I find it difficult to learn many languages at once. I started with HTML and CSS. Now I'm working on PHP and MYSQL.Flash and Multimedia information I knew already. I don't know why..

[TehBlizzy]

I copied most of that code and did my best to adapt it but it doesn't work.This is my Javascript code:

<script style="javascript">function ajaxFunction(){  var xmlHttp;  try  {	// Firefox, Opera 8.0+, Safari	xmlHttp=new XMLHttpRequest();  }  catch (e)  {	// Internet Explorer	try	{	  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");	}	catch (e)	{	  try	  {		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");	  }	  catch (e)	  {		alert("Your browser does not support AJAX!");		return false;	  }	}  }    xmlHttp.onreadystatechange=function()  {	if(xmlHttp.readyState==4)	{	  alert("the response came back:n" + xmlHttp.responseText);	}  }  data = "";  data += "Username=" + escape(document.getElementById("Username").value);  data += "&UserMsg=" + escape(document.getElementById("UserMsg").value);  xmlHttp.open("POST","post.php",true);  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  xmlHttp.setRequestHeader("Content-length", data.length);  xmlHttp.send(data);}</script>

This is my HTML form:

<form name="Msg" method="post">								Username<br><input id="Username" type="text" name="Username" value="">					</td>					<td>															Message<br><input id="UserMsg" type="text" name="UserMsg" size="90"> <input type="submit" value="Send!" onClick="ajaxFunction()">							</form>

and this is my PHP script I put into post.php (Nothing else is in it other than the script)

<?php $msg = $_POST["UserMsg"];$name = $_POST["Username"];$file = fopen("text.htm","a+");fwrite($file,"$name says: $msg <br>");fclose($file);?>

Not sure what the prob is, but I know there is one >_>

[Synook]

Try changing your form code to

<form name="Msg" method="post" action="#" onsubmit="ajaxFunction(); return false; ">								Username<br><input id="Username" type="text" name="Username" value="">					</td>					<td>															Message<br><input id="UserMsg" type="text" name="UserMsg" size="90"> <input type="submit" value="Send!">							</form>

[TehBlizzy]

It gives me the same error thing:"the response came back:n"-Edit:Never mind! it works! I just didn't scroll down the chat box!! Awesome! I just gotta delete that stupid "if" statement and it works perfect! I guess all I need is the thing that will auto-scroll the chat frame down to the next line

[TehBlizzy]

Yes!! I got it finally. I was so clumsy I forgot to close the reload function, causing me to waste about an hour trying different scroll methods ><

[TehBlizzy]

Ok. In general the chat is done!! The only thing now is that for some reason, when the user clicks send or hits enter using IE the message box loses focus, but it doesn't in Firefox. I've tried a variety of methods to get the focus to go back to the message box, but they never worked for IE. Any suggestions?

[SpOrTsDuDe.Reese]

Post the link to the website. I'll see what I can do.

[justsomeguy]

Add a line to focus the text box at the end of the AJAX function. You need to put an ID on the text field to reference it in Javascript and then use the focus method.

[Synook]

document.getElementById('theIdOfYourTextField').focus();