Author Topic: Google Chrome & Chat Application  (Read 2386 times)

Offline Glenugie

  • Level 10
  • *
  • Posts: 65
  • Reputation: +0/-0
    • View Profile
    • The Land of Ennui
Google Chrome & Chat Application
« on: August 22, 2010, 06:10:07 AM »
Okay, so my game has a relatively simple AJAX chat application, controlled by this form (Javascript functions omitted for now):
Code: [Select]
<body onload="javascript:startChat(); onloadfocus();">
<div id=divEnnuiChat style="height: 99%; width: 100%; overflow: hidden;">
<font size=1><div id="divChat" style="height: 95%; width: 100%; overflow: auto;">
</div></font>

<div id="divControl" style="height: 5%; width: 100%; overflow: hidden;">
<form name="ChatControl" id="ChatControl" onkeypress="{if (event.keyCode==13)blockSubmit()}">
<input type="text" name="StackOverflow1370021" value="Fix Submit bug" style="display:none" />
<input type="text" class=chattext name="Message" id="Message" autocomplete=off maxlength=1000 style="width: 65%;">
<input type="button" class=chatbutton name="ChatButton" id="ChatButton" value="Send" onclick="javascript:sendChatText();">
<a href="JavaScript:getChatText();"><img src="/EnnuiImages/System/Reload.png"></a>
</form>
</div>
</div>
</body>

For IE/FF this works perfectly fine, but when we come to chrome, my function that sends the message if enter is pushed, doesn't work properly. Instead, when enter is pushed, it reloads the chat frame. This is understanably annoying, since it's just habit to push enter to send messages, and having it clear the chat because you've done so is counter-intuitive.

The send text on enter function is simply:
Code: [Select]
function blockSubmit() {
sendChatText();
return false;
}

If you need any more of the code to suggest what the issue may be, ask. Thanks for any replies in advance,

Glenugie

Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,430
  • Reputation: +29/-1
    • View Profile
Re: Google Chrome & Chat Application
« Reply #1 on: August 22, 2010, 06:30:42 AM »
Chrome is known for having such problems. I would just made a browser detection and disable chat if it is present (I recently stumbled on a quite popular website that had some functionality disabled for Chrome, I think it was chat as well). Fortunatelly, unlike IE users, Chrome users are almost assured to have another browser available, so it should not be a big deal.

Offline Nox

  • Level 35
  • **
  • Posts: 798
  • Reputation: +14/-2
    • View Profile
Re: Google Chrome & Chat Application
« Reply #2 on: August 22, 2010, 06:44:41 AM »
Maybe change type="button" to type="submit"?

Offline Glenugie

  • Level 10
  • *
  • Posts: 65
  • Reputation: +0/-0
    • View Profile
    • The Land of Ennui
Re: Google Chrome & Chat Application
« Reply #3 on: August 22, 2010, 06:52:23 AM »
Chris: I'll use that solution if there isn't a way provided to fix the issue, thanks :)

Nox: Just tried that, it just makes chat refresh in all browsers when the form is submitted. Thanks for the suggestion though :)

Offline Nox

  • Level 35
  • **
  • Posts: 798
  • Reputation: +14/-2
    • View Profile
Re: Google Chrome & Chat Application
« Reply #4 on: August 22, 2010, 07:43:44 AM »
Combined with onsubmit on <form> (same as onclick on button)?

Offline Glenugie

  • Level 10
  • *
  • Posts: 65
  • Reputation: +0/-0
    • View Profile
    • The Land of Ennui
Re: Google Chrome & Chat Application
« Reply #5 on: August 22, 2010, 07:57:22 AM »
Nox: Yep, same effect, it just sends the message, then reloads the page.

Offline Harkins

  • Level 29
  • **
  • Posts: 436
  • Reputation: +12/-2
  • Coder, blogger, entrepreneur.
    • View Profile
    • Push CX - Blog
Re: Google Chrome & Chat Application
« Reply #6 on: August 22, 2010, 11:23:43 AM »
Code: [Select]
<form name="ChatControl" id="ChatControl" onkeypress="{if (event.keyCode==13)blockSubmit()}">

Remove the extra {}, they're invalid js.
Move the onkeypress from the form to the elements.
Edit blockSubmit() to log the event and keyCode, see if your event is even being triggered.
Maybe you're running into this bug, try onkeyup.

Visit #bbg on irc.freenode.net to talk browser games anytime.

Offline Glenugie

  • Level 10
  • *
  • Posts: 65
  • Reputation: +0/-0
    • View Profile
    • The Land of Ennui
Re: Google Chrome & Chat Application
« Reply #7 on: August 22, 2010, 12:07:07 PM »
Harkins: Didn't seem to help, I should point out, the messages always send before the chat refreshes, and it's doing it in very quick sucession, since the message sent by the user appears in the chat pane after it reloads, followed by the chat sign in message.

Offline Harkins

  • Level 29
  • **
  • Posts: 436
  • Reputation: +12/-2
  • Coder, blogger, entrepreneur.
    • View Profile
    • Push CX - Blog
Re: Google Chrome & Chat Application
« Reply #8 on: August 22, 2010, 04:47:43 PM »
What did the logging tell you? Are your events even firing in Chrome?

Visit #bbg on irc.freenode.net to talk browser games anytime.

Offline e-fish

  • Level 6
  • *
  • Posts: 23
  • Reputation: +0/-0
    • View Profile
Re: Google Chrome & Chat Application
« Reply #9 on: August 22, 2010, 05:09:10 PM »
Not sure what your code looks like now but if you replace
Code: [Select]
blockSubmit() with
Code: [Select]
return blockSubmit() I would assume it will now work. Your previous code would not work in Safari or any other webkit based browser. It is not the fault of webkit but a quirk of IE/FF.

I would strongly suggest ignoring Chris' post as that is not the way to do things and is the wrong attitude. Nox's suggestions should be followed though as good practise/less complexity/clearer code/no code replication.

You may want to consider what to do if a user doesn't have javascript enabled; and may I ask why you chose not to use a js framework? If you had I doubt you would have made this error.
nosql or nodb?

Offline jannesiera

  • Level 35
  • **
  • Posts: 1,026
  • Reputation: +6/-1
    • View Profile
    • BBGameDesign
Re: Google Chrome & Chat Application
« Reply #10 on: August 22, 2010, 05:36:51 PM »
Instead of checking with an if statement directly like this

Quote
onkeypress="if (event.keyCode==13) { blockSubmit() }"

I suggest you move it into the function by passing the event (something like this but not 100% sure):

Quote
onkeypress="blockSubmit(window.event)"

and

Quote
function blockSubmit(event) {
   if (event.keyCode != 13) { return }
   // Your actual function
}

Also, you may want to use event listeners instead of inline events and you may find this link helpful: http://www.quirksmode.org/js/events_access.html

ST-Mike

  • Guest
Re: Google Chrome & Chat Application
« Reply #11 on: August 22, 2010, 05:42:31 PM »
Admins have ignored my deletion request - if you're not going to delete my account then don't have the option there please.
« Last Edit: March 15, 2011, 07:44:27 PM by None »

Offline Glenugie

  • Level 10
  • *
  • Posts: 65
  • Reputation: +0/-0
    • View Profile
    • The Land of Ennui
Re: Google Chrome & Chat Application
« Reply #12 on: August 23, 2010, 02:29:53 AM »
Harkins: Sorry, I must've missed out the line about logging in your first post. Ah well, fixed now :)

e-fish: As mike said, your solution was right for the problem, fixed it perfectly. For the most part, I didn't use a JS framework because it never occurred to me to do so.

jannesiera: I haven't immediately tested your solution, are there any direct benefits from using it?

Mike: I took your advice and changed the code to your specifications, still works just fine :)

Thanks for the help everyone!

Glenugie

ST-Mike

  • Guest
Re: Google Chrome & Chat Application
« Reply #13 on: August 23, 2010, 03:53:58 AM »
Admins have ignored my deletion request - if you're not going to delete my account then don't have the option there please.
« Last Edit: March 15, 2011, 07:44:21 PM by None »

 


SimplePortal 2.3.3 © 2008-2010, SimplePortal