需要与ajax概念项目的想法

Question

i've create a chat in ajax, but i still have some problem that i can't recognize. When the page is loaded, the php load all the opened chat and relative mex, then there's an addmex ajax function: when the user hits enter it's called passing this.value and the cod_chat. The ajax function send these data to the php, which insert them into the db and add the last mex into the chat. Every X seconds an update function is called, to update the chat. It all works until it gets to the addmex function: the php works, because it add the mex into the db, but for some reason it refresh the page. Could i use RTMP?

This is the code of the form:

<input type='text' class='chat_input' value='write something' onkeydown='if (event.keyCode == 13){addmex(this.value); this.value='';}'/>

and this is the code of the ajax function (don't worry about the php variables because this function is loaded by echo):

function addmex(mex)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","addmex.php?cod_contatto="+' . $cod_contatto . '+"&mex="+mex,false);
xmlhttp.send();
document.getElementById("messaggi_' . $cod_contatto . '").innerHTML+=xmlhttp.responseText;
}

I set Async as false because it respond slowly, and if i set true works only with some alert that let the server part complete. Any idea?

Answer 1

How is your insert field implemented? If it is in a HTML form, it will send the form when you hit enter. So if this is given, you need to prevent the default enter action in order to prevent the page refresh: Just get the js event (onkeydown), do what you need to do and return false.

EDIT

You may assign the handler in a diffrent way: Give the input an ID so this will work:

document.getElementById(yourID).onkeydown = function(event) {
  if(event.keyCode == 13){addmex(this.value); this.value='';}
  return false;
}

EDIT 2

Your first code has a syntax error, it should be:

.... this.value="";}'/></form>

You cant use the same quotes in the inner String: '''' are like 2 strings, while '""' is one string in another.

SOLUTION For those who happen to read this.

The form tag was unnecessary and caused the page to refresh (sometimes preventing default does not work?!).

Finally there was the refreshing via ajax missing. Just do a setInterval() with the function and it should work all fine.