rauchg / chat-example

797 stars 2.06k forks source link

add document.ready() to the tutorial html and website #8

Open xShirase opened 10 years ago

xShirase commented 10 years ago

I came by this question today on SO :

http://stackoverflow.com/questions/26261059/socket-io-chat-tutorial-not-functioning-properly

We need to add document.ready to the tuto for it to work, and update the Socket.IO website too so the newbies don't panic :)

$( document ).ready(function() { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); });

HoverBaum commented 9 years ago

Was going to point out the same thing. In the tutorial it tells us to put the script in the head. But that results on the handler not properly being added.

I would suggest updating the tutorial on http://socket.io/get-started/chat/ to put the script at the end of the body like the file on Git does.

glaukommatos commented 9 years ago

I've also run into this issue while implementing the example application. While I'm familiar with the $(document).ready(...) pattern, I assumed I was doing something else wrong or that my browser was being weird, since I didn't trust my own JavaScript knowledge more than I trusted the Socket.IO example.

I definitely agree that it's a good idea to update the tutorial, since I know that if I hadn't already been familiar with the problem, I would have spent a very long time trying to figure it out and been very discouraged instead of coming to Github to whine about it. :+1:

Let me know if I can help, thanks!

ilkermutlu commented 9 years ago

It does already work without $(document).ready();, at least on my part.

ABtasty-Li-Liuyi commented 7 years ago

Reference ==> I have the same problem of $(document).ready();. I thought the socket.io is not working, I checked a lot of times, then I found even the submite event is not triggered. So $(document).ready(); is necessary for me.

VaelVictus commented 7 years ago

I put it in the header, as I should, and it didn't work. Document ready did it. $(function(){}), of course.