|
JavaScript - Ajax Chat Double Posting Opera
I've made a ajax chat system. Works fine all browser but opera. Opera seems to have a problem with double posting the same message over and over again. I can't seem to figure out why it's doing this. Is it a known opera bug?
So the way the chat works is that you type in your message, your press enter, it then sends it to the server so that it can later be fetched by ajax to append it to the chat window. This seems to all work fine with all browser but opera. Please note that my Javascript isn't the best in the world, so any comments about the way I'm coding it and pointing out errors in my code would be awesome. Maybe someone here can explain to me why this is happening. Here is the code. Thanks for anytime spent into looking at this. Code: var refresh_rate = 1000; //Every second
var idleTime = 1200000; //20 minutes
var prev;
function fade(obj, duration, toggle) {
this.steps = 300;
this.elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/this.steps)) {
if(document.getElementById && !document.all) {
setTimeout("this.elem.style.opacity = "+ i +"", i * duration);
}
else {
setTimeout("this.elem.style.filter='alpha(opacity="+ i * 102 +"'", i * duration);
}
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/this.steps)) {
if(document.getElementById && !document.all) {
setTimeout("this.elem.style.opacity = "+ (1-i) +"", i * duration);
}
else {
setTimeout("this.elem.style.filter='alpha(opacity="+ (1-i) * 102 +"'", i * duration);
}
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
function $(elem) {
var obj = document.getElementById(elem);
if(!obj) return;
return obj;
}
function addEvent(elem, typ, func) {
var obj = document.getElementById(elem);
if(document.getElementById && !document.all) {
obj.addEventListener(typ, func, false);
}
else if(document.all) {
obj.attachEvent("on"+typ, func);
}
}
var http = createAjax();
function createAjax() {
if(!this.http && window.ActiveXObject) {
try {
this.http = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
catch(e1) {
this.http = false;
}
}
if(!this.http && window.XMLHttpRequest) {
try {
this.http = new XMLHttpRequest();
}
catch(e2) {
alert("Sorry we was unable to make a request between your browser.");
}
}
return this.http;
}
function cancelInterval() {
this.canInterval = window.setTimeout("stopInterval();", idleTime);
}
function stopInterval() {
window.clearInterval(this.refreshChat);
this.refreshChat = null;
this.canInterval = null;
var sp = document.createElement("span");
sp.style.cssText = "color:#D83E3E; font-size:0.8em; font-style:italic;";
sp.setAttribute("id","idleMsg");
sp.innerHTML = 'Your chat has gone idle.';
$('chat-window').appendChild(sp);
$('chat-window').scrollTop = $('chat-window').scrollHeight;
fade('idleMsg',1000,1);
}
function canTimeout() {
window.clearTimeout(this.canInterval);
this.canInterval = null;
}
function startRefresh() {
this.refreshChat = window.setInterval("rh()", refresh_rate);
}
function pressEnter(e) {
if($('textbox').value.length >= 1) {
if(this.canInterval) {
canTimeout();
}
if($('idleMsg')) {
$('chat-window').removeChild(document.getElementById('idleMsg'));
}
var textbox = $('textbox').value;
if(e.keyCode == 13) { //press enter
http.open('post','scripts/php/chat.php',true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('textbox='+encodeURIComponent(textbox));
$('textbox').value = '';
}
if(!this.refreshChat) {
startRefresh();
}
}
}
function sendText() {
if(this.canInterval) {
canTimeout();
}
var textbox = $('textbox').value;
alert(textbox);
var params = 'textbox='+ encodeURIComponent(textbox);
http.open('post','scripts/php/chat.php',true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.setRequestHeader('Content-length', params.length);
http.setRequestHeader('Connection','close');
http.send(params);
$('textbox').value = '';
if(!this.refreshChat) {
startRefresh();
}
}
var cc = 0;
var nm = 0;
function rh() {
if(!this.canInterval) {
cancelInterval();
}
var rmd = Math.random();
http.open('get','scripts/php/chat.php?s=true&rmd='+rmd, true);
http.send(null);
http.onreadystatechange = refresh;
function refresh() {
var scrollT;
($('expand').innerHTML == 'Expand +') ? scrollT = 133 : scrollT = 233;
if(http.readyState == 4 && http.status == 200 && http.responseText != null && http.responseText.length >= 1 && http.responseText != prev) {
if(http.responseText == prev) {
alert("testing...");
}
var span = document.createElement("span");
span.setAttribute("id",cc);
span.innerHTML = http.responseText;
$('chat-window').appendChild(span);
if($('chat-window').scrollTop+36 >= $('chat-window').scrollHeight-scrollT) {
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
prev = http.responseText;
cc++;
if(cc >= 70) { //Start removing old chat after 70 messages
if($('wel')) {
$('chat-window').removeChild(document.getElementById('wel'));
}
var n = cc - cc+nm;
$('chat-window').removeChild(document.getElementById(n));
nm++;
}
}
}
}
this.refreshChat = window.setInterval("rh()", refresh_rate);
function addEvent(elem, typ, func) {
var obj = document.getElementById(elem);
if(document.getElementById && !document.all) {
obj.addEventListener(typ, func, false);
}
else if(document.all) {
obj.attachEvent("on"+typ, func);
}
}
function expand() {
var chatWindow = $('chat-window');
var chat = $('chat');
var spanExpand = $('expand');
if(spanExpand.innerHTML == 'Expand +') {
chatWindow.style.height='230px';
chat.style.height='300px';
spanExpand.innerHTML = 'Collapse -';
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
else {
spanExpand.innerHTML ='Expand +';
chatWindow.style.height='130px';
chat.style.height='200px';
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
}
var i = 0;
function fixTextBox(k) {
var str = document.getElementById('textbox');
}
function changeColor(id) {
var colors = new Array();
colors[1] = '#f1f1f1';
colors[2] = '#ff593f';
colors[3] = '#A51792';
colors[4] = '#4E9258';
colors[5] = '#2B65EC';
colors[6] = '#DE954B';
colors[7] = '#36b3e1';
colors[8] = '#FD13DE';
colors[9] = '#6eb361';
var rmd = Math.random();
var params = "c="+id+"&rmd="+rmd;
http.open("post","scripts/php/chat.php", true);
$('color').style.backgroundColor = colors[id];
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.setRequestHeader('Content-length', params.length);
http.send(params);
document.getElementById('colorPicker').removeChild(document.getElementById('colorTree'));
document.getElementById('colorPicker').removeChild(document.getElementById('colorBox'));
$('textbox').focus();
}
function popColors() {
if(!$('colorTree') && !$('colorBox')) {
var colorBox = document.createElement("div");
colorBox.style.cssText="background:#000000; border:2px solid #333333; width:135px; height:60px; position:absolute; left:8px; bottom:15px; opacity:0.5; filter:alpha(opacity:50); z-index:1;";
colorBox.setAttribute("id","colorBox");
var colorTree = document.createElement("div");
colorTree.setAttribute("id","colorTree");
colorTree.innerHTML = "<span style=\"background:#f1f1f1; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" title=\"White\" onclick=\"changeColor(1)\"></span> <span style=\"background:#ff593f; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(2)\" title=\"Red\"></span> <span style=\"background:#A51792; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(3)\" title=\"Purple\"></span> <span style=\"background:#4E9258; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(4)\" title=\"Green\"></span> <span style=\"background:#2B65EC; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(5)\" title=\"Blue\"></span> <span style=\"background:#DE954B; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(6)\" title=\"Orange\"></span> <span style=\"background:#36b3e1; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(7)\" title=\"Teal\"></span> <span style=\"background:#FD13DE; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(8)\" title=\"Pink\"></span> <span style=\"background:#6eb361; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(9)\" title=\"Lime Green\"></span>";
$('colorPicker').appendChild(colorTree);
$('colorPicker').appendChild(colorBox);
}
else {
document.getElementById('colorPicker').removeChild(document.getElementById('colorTree'));
document.getElementById('colorPicker').removeChild(document.getElementById('colorBox'));
$('textbox').focus();
}
}
function popColorsClose() {
if($('colorTree') && $('colorBox')) {
document.getElementById('colorPicker').removeChild(document.getElementById('colorTree'));
document.getElementById('colorPicker').removeChild(document.getElementById('colorBox'));
$('textbox').focus();
}
}
Similar TutorialsHello, I am very new on JS and Ajax. It does not work correctly. It posts not only form values but also whole form, box etc. eveything. Also form values disappears after a very short time. Why it is like that? My decisive aim is transfer this form values to php and database via ajax. http://fcbk.imeee.org/test.php Thanks in advance.. I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use. Nice It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears. I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too). here's the script I'm using - there's not much to it How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera Hello. I'm currently playing with some projects, and one of them is creating a simple 2D chat, where users have an avatar, that they can move around and chat with. I want to do this with PHP and jQuery. Question here is, if I set it to auto-update the chat every 1 second, and get the new values in the database (if user has moved position), will it suck up too much bandwidth if there's 5 - 30 users online at the same time? I know there's other better ways of creating a 2D chat, but I'm just doing this for practice of my programming skills. Hey guys. Didnt know what forum to put this in, but i figured i would put it here. Basically im making an ajax chat client. I dont know if anyone here as ever looked at googles chat client code, but if anyone knows how to make one function the same way as it, I would love if you would help me figure it out. I tried making a chat client, but it ended up being slow, buggy, and you couldnt select text because the innerhtml was refresshing so much. So how can I make a good chat client like googles? Thanks! So, I need help with a script that swaps out chatango chats and allows you to expand/shrink them. Here's the source: Code: <div id="chatWrap">
<div id="cbox"></div>
<div id="ccon">
<button onclick="switchChat();">Switch to <strong id="cnext">Chat Title</strong></button>
<button id="csize" onclick="resizeChat();">Expand</button>
</div>
</div><br />
<div id="chatNotice" style="display:none;">Note: When you switch chats, the expand/shrink button stops working until you reload the page. Hopefully this will be fixed soon. <a href="javascript:void(0);" onclick="javascript:get('chatNotice').style.display='none';">[Hide this Notice]</a></div>
<script type="text/javascript"><!-- // --><![CDATA[
var chats = [];
chats[0] = ['Forums Chat','dh-forums-chat', 1249524788838];
chats[1] = ['Main Chat', 'dh-chat', 1247103393344];
var chat = {
'opt': 'b=60&f=50&l=999999&q=999999&r=100&s=1',
'ref': 'www.dubhappy.com',
'cur': 0,
'delay': 1.5,
'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
}
var chatState = 0;
var chatStates = [];
chatStates[0] = ['Expand', '300px'];
chatStates[1] = ['Shrink', '500px'];
var eles=[''];
function get(id){eles[id]=eles[id]||document.getElementById(id)||false;return eles[id];}
function cE(e){return document.createElement(e);}
function cT(s){return document.createTextNode(s);}
var ie = false;
function aO(d, t, src, p, id ){
var o, e, i;
if (!ie){ o = cE('object');o.data = src; }
else { o = cE('embed'); o.src = src; }
o.id = id;
if (!ie){ p.push( ['movie', src] ); }
if ( typeof(id) === 'String' ){o.id = id;}
o.type = t;
for(i = 0; i < p.length; i++){
e = cE('param');
e.name = p[i][0];
e.value = p[i][1];
o.appendChild(e);
}
d.appendChild(o);
}
function switchChat(){
var x = chat.cur;
chat.cur = (x + 1) % chats.length;
var c = chats[x];
var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
get('cbox').innerHTML = '';
aO( get('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
get('ccon').style.display = 'block'; // qfix
get('cnext').innerHTML = chats[chat.cur][0];
get('chat').style.height = chatStates[chatState][1];
get('csize').innerHTML = chatStates[chatState][0];
}
function resizeChat(){
if(chatState == 0)
chatState = 1;
else
chatState = 0;
get('chat').style.height = chatStates[chatState][1];
get('csize').innerHTML = chatStates[chatState][0];
}
function chatInit(){
if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
if ( chat.delay <= 0 ){
switchChat();
} else {
var i = cE('img');
i.src = 'http://dubhappy.com/ajax-loader.gif';
get('cbox').appendChild(i);
get('cbox').appendChild( cT(' Loading Chat...') );
window.clk = setTimeout( function(){switchChat(); get('chatNotice').style.display = '';}, chat.delay * 1000 );
}
delete chatInit;
}
chatInit();
//]]></script>
There's also some CSS: Code: /* Chat Styling */
#chatWrap{
width: 235px;
margin: 0 auto;
}
#chat{
height: 300px;
width: 235px;
}
#ccon{display: none;}
#ccon a{
text-decoration: none;
display: block;
}
This is implemented at http://forums.dubhappy.com/ As you can see by the notice under the chatbox, after swapping out the chats, the expand/shrink button no longer works until you reload the page. Do you know how to fix this? I've spent way too much time trying to figure out why this was happening. Much thanks if you manage to figure out the problem. Hi, I have a problem with max. memory usage, and I wonder what pingtime in a chat program is for, I imagine its to refresh to see if person is still there, but not sure, if anybody can explain. I have this on all pages where the chat is: serversession=1&pingtimes=15 I wonder if it makes any difference to change the pingtime, thanks Does anyone know of a good tutorial on how to make a good node.js chat? I need a chat that a decent VPS server can handle ~100 simultaneous users with and apparently I should be using node.js but have no experience with it. What should I look at? Thanks! Hello, I am very new to javascript, and I'm having a hard time finding a way to easily add some chat code to our website without manually adding it to every page. Here's the deal: I need to add this code to every page of our website: Code: <div id="cihfi9" style="z-index:100;position:absolute;"></div><div id="schfi9" style="display:inline;float:right;"></div><div id="sdhfi9" style="display:none"></div><script type="text/javascript">var sehfi9=document.createElement("script");sehfi9.type="text/javascript";var sehfi9s=(location.protocol.indexOf("https")==0?"https://secure.providesupport.com/image":"http://image.providesupport.com")+"/js/mrcuser/safe-standard.js?ps_h=hfi9\u0026ps_t="+new Date().getTime();setTimeout("sehfi9.src=sehfi9s;document.getElementById('sdhfi9').appendChild(sehfi9)",1)</script><noscript><div style="display:inline"><a href="http://www.providesupport.com?messenger=mrcuser">Live Support</a></div></noscript>
I would like the chat icon to appear at the top of each page next to our main menu links. Our main menu links are called from one javascript file. I would like to figure out a way to add this code to the javascript file, so I only have to add it once. The javascript file only has one line of code: document.write(all of our main menu links). Is there a way to add the chat code to the main menu javascript file so that the chat icon will appear on every page, or is this impossible? Thanks for your help! Im not sure what type of script it is, but another site i saw had a webcam chat room that was a swf file. I know that flash, but where can i get a script for a Webcam chat room to set up on my site. Thanks Hey guys. I made a chat client today (my first one and it's pretty sweet so far) I have a speed problem though http://xonicgames.com/hudson/chat.php Once there are ~20+ posts it starts getting slow (at least on my connection) It does an ajax request every 500 seconds (dont know if that should be slowed down or not) What can I do to speed it up? Thanks What is the most efficient type of chat to make? From what I see online most people use a database and limit the number of results they return, but I noticed that some chats, like google and facebook, for some reason are able to load the full chat and get results almost instantly. How do they do it? I would love to make a replica of a google chat and just redesign the way it looks. If anyone can help me with the javascript/php part of this, that would be great. thanks! I want to make a chat-box so people can log in under a nickname and talk to eachother, anyone have any idea how i can go about doing this?
I have developed one to one chat in asp.net. Now I wanted a gmail chat like feature in it. In left side of page, a list of online users should be available. When I click on a user, a new div should popup on right bottom corner with close and minimise buttons. When I click on another user , a second div should popup on right bottom corner of page but left to the first popup div. I want popping up of divs dynamically. The no of clicked users should decide the no of popped up divs. Also, for each division there should be a separate division ( inside the popped division ) whose innerhtml value is my chat text. And if three divs are popped up and if I close the second one, the third should get attach to first popup. Hope, you'll understand my requirements, and will provide a suitable code in javascript. Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Hi, Im not sure if this is in the right place, but anyway, what im trying to achieve is turning an x7 chat application into a paid to chat service, i know it can be done but im just not sure how to code it, what i was wanting to do is have an earnings bar that updates itself when a member types a line of chat and credits that user with the current line pot ie 0.01 per line written on the chat (example) Users current earnings 0.0001c current written line pot 0.0003 Hope this makes sense Can anyone help me please Thanks in advance Baz Sorry if this post is very noobish, its because I am a noob. Ok, so I have a forum with Proboards and want to add a chat using the "headers/footers" but as Ive been having some trouble on my forum, I need the chat to have an admin panel (ban, warn, even see IP's if possible etc). I also need it to be streaming, not a refresh chat room. I cant seem to find a chat with this function anywhere, can anyone help? P.S I know you can have AddonChat with Proboards but that does not have the admin tools that I need and I cant afford to pay for these priveleges. If this is not possible, does anyone know any codes I could use with my AddonChat to at least give me some kind of admin control? Cheers xx I have got a script for chat room from hotscripts however the author has left the site and I am not able to contact him. So if anyone here can guide me a bit? It is basically a php/ajax chat room script using javascript. It runs fine here is a demo: Code: http://sharinganuser.freeiz.com/Test/chat/ i have set it up properly and it is even using mysql database. My question is that I want to make log of what ever the chat is happening (even the private ones) as I am admin. I am very good at php and understand what he has done in php but I when it comes to javascript i am not a person for it. So if anyone can help me with javascript? Cause when I see the msg send button source code it shows onclick is javascript:void(0) means it is using a java script. And there are total of 4 js files used: Code: http://sharinganuser.freeiz.com/Test/chat/js/ Note: log saved in database only remains for 15 minutes or somewhat like that cause i checked the data the old conversation was gone so I am now trying to use PHP fwrite code. i know how to write and implement it but again it has to go in some js file where the send button is related and I am not sure which file and exactly where. So any help would be appreciated. Regards, Here is my website... www.thepriceoflust.com You need to log into my website as a user... User Name is: supramaniac Password is: lakeella On the top bar you can click on the chat tab... Enter into one of the chat rooms... As you will see the chat room window turns into like its own web browser and displays a copy of my index page... The chat rooms used to do that before and someone fixed it and said that my permissions were wrong on my installation folder. I don't know if that is right or not. Why would it go back to doing the same thing. Anyway does anybody know how to fix this issue?
Hi, I'm still in the early stages of learning Javascript so I'm not sure how (or if it's possible) to do this. I know HTML, CSS, etc... just not too familiar with Javascript. Here's the deal.... I run a website that features a chat room written in Perl for CGI. The chat room will automatically email a user their password if it's forgotten but there is one issue.....it does not have the "Forgot Password?" link. To achieve the Lost Password page, the user must enter an invalid password FIRST on the login screen, otherwise they cannot get to that option and are often requesting assistance. What I had in mind was an easier way for the user to get their password since new novice members are not sure how to get to the lost password page. I'm not trying to edit the Perl code for the chat, but I wanted to build a "Forgot Password?" page using a Javascript code that will automatically take their username from the "username" login field and direct them to the lost password page which would be "chat2.cgi?action=send_pwd&name=..." I'm sorry if this is confusing, I'm not sure that I am explaining this right. When the user enters an invalid password, it takes them to the lost password page which contains a link "lost password" and will automatically email them their login details when clicked on. When they click that link, the URL contains the string "chat2.cgi?action=send_pwd&name=username" What I would like to do is put a link on the login page (like most normal chat rooms have) that says "Forgot Password?". When clicked on, I want it to take them to a page where all they have to do is enter their username in a form and click Submit, then have a Javascript code automatically extract their username from that field and insert their username automatically to the end of that URL (chat2.cgi?action=send_pwd&name=...) where ... would be the name extracted from that form field. This would result in the browser taking them to that URL which would trigger the chat to automatically email the password. Can I do this with Javascript?? If so, any help would be greatly appreciated! |
|||||||