tutorial has you place a script BEFORE body and doesn't work #2467

ksullivan2 · 2016-03-02T22:57:22Z

In the chat tutorial, the instructions specifically state:

Now in index.html I add the following snippet before the body:
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

However, the next time this code is edited, it will need to reference elements that are created within the body.

<body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>

  <script>
    var socket = io();
    $('form').submit(function(){
      <!--these lines reference element 'm', which is created in the body-->
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script>

Simply changing the word BEFORE to AFTER in the first instruction would fix the issue. New users, especially those new to programming/JS/HTML in general, may not catch the error and become frustrated by a tutorial that seems not to work (there are multiple Stack Overflow posts about this, such as this one).

baconbrad · 2016-03-04T16:08:41Z

The tutorial is correct as I can see. Note it says before the </body>. Not before the body. It is referring to the closing body tag and not the body itself.

ksullivan2 · 2016-03-04T19:24:42Z

Oh! I completely missed that "/''. Perhaps it could be clarified to say
"before the closing tag" to avoid that confusion in the future.
Thanks for responding!

On Fri, Mar 4, 2016 at 11:09 AM Brad Metcalf notifications@github.com
wrote:

The tutorial is correct as I can see. Note it says before the .
Not before the body. It is referring to the closing body tag and not the
body itself.

—
Reply to this email directly or view it on GitHub
#2467 (comment)
.

jameskraus · 2016-04-06T17:02:34Z

This is not intuitive. It is very easy to misread this statement and place the scripts in the head, before the <body>, where they are usually found. jQuery does not allow for selection of elements off the bat, so pasting the code in the head will cause the $("form") selector to fail. It would be easy to mitigate this two ways:

Change the code to include a $().ready(function{....}); wrapper, so that it works if it is placed in the head.
Change the wording to say "after the </form>", which makes it obvious that the code needs to be placed in the body (out of the norm), and after the form element.

Here are some examples of confused people with the same issue:
rauchg/chat-example#9
#2035

If you search around Stackoverflow, there are some other users which have the same problem without realizing it.

darrachequesne · 2017-01-12T15:58:00Z

That issue was closed automatically. Please check if your issue is fixed with the latest release, and reopen if needed (with a fiddle reproducing the issue if possible).

darrachequesne closed this as completed Jan 12, 2017

darrachequesne added the Closed due to inactivity label Jan 12, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tutorial has you place a script BEFORE body and doesn't work #2467

tutorial has you place a script BEFORE body and doesn't work #2467

ksullivan2 commented Mar 2, 2016

baconbrad commented Mar 4, 2016

ksullivan2 commented Mar 4, 2016

jameskraus commented Apr 6, 2016 •

edited

Loading

darrachequesne commented Jan 12, 2017

tutorial has you place a script BEFORE body and doesn't work #2467

tutorial has you place a script BEFORE body and doesn't work #2467

Comments

ksullivan2 commented Mar 2, 2016

baconbrad commented Mar 4, 2016

ksullivan2 commented Mar 4, 2016

jameskraus commented Apr 6, 2016 • edited Loading

darrachequesne commented Jan 12, 2017

jameskraus commented Apr 6, 2016 •

edited

Loading