Jump to content

Problem with ajax only on mozilla


johny20
 Share

Recommended Posts

Hello guys,I have implemented a chat web application using PHP, MySQL and Ajax. It runs very well on browsers like Opera, Chrome, IExplorer but the problem is only on Mozilla. The ajax is used to update a specific part of the page (the one with the conversation). So, when a user writes, using the keyboard, and if mozilla is about to update the conversation then we "lose" some characters... What I mean is that if we try to write the numbers from 0 to 9 then we won't see some numbers because that time the ajax was updating the message content. On the other browsers I have a delay but there is not any problem with the inputing. Here is the ajax code:

	function keyEvent(e)	{	if (window.event)	{	e = window.event;	}	if (e.keyCode==13)	{	send();	}	}	 	 	function getObject()	{	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");	else if (window.XMLHttpRequest) return new XMLHttpRequest();	else {	alert("Ajax is not supported, try a different browser.");	return null;	}	}	 	function showMessages()	{	httpObject = getObject();	httpObject.open("GET", "apath/show-messages.php?", false);// + Math.random(), false);	httpObject.send(null);	document.getElementById("messages").innerHTML = httpObject.responseText;	setTimeout("showMessages()",3000); //refresh the messages every 3 seconds	 	}	 	showMessages();	 	function send()	{	httpObject = getObject();	httpObject.open("GET", "apath/send.php?message=" + document.getElementById('message').value, false);	httpObject.send(null);	document.getElementById("message").value = "";	}

Can anyone help with that please?

Link to comment
Share on other sites

What is the HTML markup that uses that?
Hello and thanks for the reply.Inside a PHP file I have the following code:
<?php //typical php code to check the session for logging in ?><html><head><style>.messages {overflow:hidden;width:498px;margin-bottom:5px;border:1px solid #999;}.messagehead {overflow:hidden;background:#FFC;width:500px;}.messagecontent {overflow:hidden;width:496px;}</style> </head><body>		<center><div id="chat" style="width:500px;margin:0 auto;overflow:hidden;"></center><div id="main" style="border : solid 1px #ff0000; padding : 0px; width : 500px; height : 350px; overflow : auto; "><div id="messages"></div></div><div id="error" style="width:500px;text-align:center;color:red;">	</div><div id="write" style="text-align:center;">	<textarea id="message" cols="50" rows="5" onkeypress="keyEvent(event)"></textarea>	<br/>Name:<input type="text" id="name"/>	<input type="button" id="Send" value="Send" onClick="send();"/>	</div></div>   </body><script type="text/javascript" src="thepathto/ajax.js">	   function scrollDown()	   {		   var objDiv = document.getElementById("main");		   objDiv.scrollTop = 0;	   }	</script></html>

I store the conversation in a mysql DB. I emptied the DB to see if the amount of data was causing the problem but nothing changed... It makes me curious that, I didn't expect to face that problem on Mozilla.

Link to comment
Share on other sites

ive never used the synchronous side of ajax, but i got a feeling if you change it to asynchronous it may work,also i think asynchronous is better to use as it doesn't need to "pause" javascript while it waits for a server response, which could be causing that input issue.

Link to comment
Share on other sites

You can expect this to happen if you're typing in and updating the same element. Ajax communication is not immediate, it might take 2 seconds for the request to go out and the response to come back. If you were typing during that 2 seconds, then it's going to be overwritten. That's just what happens if you're using the same element for typing and updating. It's why most ajax chat clients have one area to display the messages, and one area to type your message.

Link to comment
Share on other sites

Oh right, I was focused on the one textarea.The synchronous aspect is one thing to look at, you also probably want to have the keypress handler return true after making the call to send.
Thank you guys for your guidance. I 'll be back, in about a month, cause I have to continue the development of other aspects of that chat application.Summary: I 'll try the asynchronous approach, I will move the CSS in an external file and I will do this "true think" (I didn't understand it actually!) with the keyboard input.Also, I forgot to mention that I didn't receive any error in Mozilla's error console.
Link to comment
Share on other sites

Redefinition of the problem! I checked my application on Windows XP with Mozilla 5.0 (firefox/2.0.0.2). I didn't experience any problem at all! When I run it on Linux or Windows XP with Mozilla 5.0 firefox canonical for Ubuntu - 1 and Mozilla 5.0.1 respectively, I face the problem. It seems that there is an issue with the last version then... ANW, thank you again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...