johny20 Posted July 27, 2011 Share Posted July 27, 2011 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 More sharing options...
justsomeguy Posted July 27, 2011 Share Posted July 27, 2011 What is the HTML markup that uses that? Link to comment Share on other sites More sharing options...
johny20 Posted July 28, 2011 Author Share Posted July 28, 2011 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 More sharing options...
JamesB Posted July 28, 2011 Share Posted July 28, 2011 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 More sharing options...
justsomeguy Posted July 28, 2011 Share Posted July 28, 2011 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 More sharing options...
thescientist Posted July 28, 2011 Share Posted July 28, 2011 doesn't have two separate elements for that?messages and message? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 28, 2011 Share Posted July 28, 2011 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. Link to comment Share on other sites More sharing options...
johny20 Posted July 29, 2011 Author Share Posted July 29, 2011 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 More sharing options...
johny20 Posted July 29, 2011 Author Share Posted July 29, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.