Basic questions about javascript

Question

Please take a peek at the following code, which is in _form.html.erb:

<script>
    function typeCatch(){
      $.post("<%= update_readers_link_essay_path(@essay) %>");
      $(this).off("keypress", typeCatch);//remove handler
     }

  $(function(){
    ("form#new_revision").on("keypress", typeCatch);
  });
</script>

When the user starts typing in a form, the ajax request should be fired and update the readers list. However, the post request is not fired when I start typing in the form and I am trying to debug this problem.

Since I am not that familiar with javacsript yet, I would appreciate if you helped me clarify a few things.

a. For the second part, can I just do

$("form#new_revision").on("keypress", typeCatch);

without wrapping it with $(function() {} ?

b. Is there anything that I'm doing wrong? Since ajax call isn't fired, I must have made a mistake in the second part?

Additional Question

my_personal_chat.js (in app/assets/javascripts pipeline)

$(function() {
  var pusher = new Pusher('app_key');
  var channel = pusher.subscribe('presence-my-chat');

  channel.bind('pusher:subscription_succeeded', function(members) {
    $('#online_users').empty();
    members.each(function(member){
        addMember(member);
    });
... other functions ...
});

This is how I implemented my chat feature, using Pusher. Since the channel is private, everytime I call var channel, an ajax call to POST /pusher/auth is invoked.

I found that every time I navigate to a different page, even when it's not where the chat feature is, POST /pusher/auth is called. Basically, every time my_personal_chat.js is loaded, the ajax call will be unnecessarily invoked.

Question: How do I prevent this from happening? my_personal_chat.js should only be loaded when I go to myapp.com/chat. Should I just pull out everything from the javascript file and put it inside chat.html.erb? Is that the conventional way of doing it?

to answer my own question: I moved the code from my_personal_chat.js to chat.js.coffee and deleted my_personal_chat.js. Now the javascript only gets loaded when users go to the chat page.

You're missing the $ from `("form#new_revision").on("keypress", typeCatch)` — Frederick Cheung, Jun 11 '13 at 07:59
It's you again @FrederickCheung! Thanks so much. Yes, I added it and the problem still persists. Also, don't I need the semicolon at the end? — Maximus S, Jun 11 '13 at 08:02
[Learn how to **debug** JavaScript.](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) — Felix Kling, Jun 11 '13 at 08:06
Yes I really should. Still fixing this problem and I will mark as an answer as soon as I get this fixed. — Maximus S, Jun 11 '13 at 08:08
Well, interpreters insert semicolons automatically, don't they? — Boyang, Jun 11 '13 at 08:12

score 2 · Accepted Answer · answered Jun 11 '13 at 07:59

2

a. There are alternatives, but wrapping the code in $(function() {}) is one of the best ways to ensure that the code isn't executed until all the elements are loaded into the DOM. It's a jQuery feature.

b. ("form#new_revision").on("keypress", typeCatch); should be $("form#new_revision").on("keypress", typeCatch);. You're missing the $ at the beginning.

answered Jun 11 '13 at 07:59

Barmar

741,623
53
500
612

1

i loaded jquery library and fix some javascript error and it works. http://jsfiddle.net/xEu8w/ – fermin Jun 11 '13 at 08:02
Thanks for all the help guys. The problem was some other javascript file was not properly imported, and that was giving this code an error. One additional question though. Suppose I have an external javascript file `foo.js` and I want this to be loaded only when I get to a certain page, `/foo`. I placed `foo.js` inside `app/assets/javascripts` directory, and it gets loaded every time I navigate to another page. – Maximus S Jun 11 '13 at 08:20
If it's being loaded even though you don't mention it in a ` – Barmar Jun 11 '13 at 08:23
1

That's due to the asset pipeline in Rails. If you look in /app/assets/javascripts/application.js, you will see a `require_tree` directive - this will load every javascript file in the javascripts folder automatically for you. For more reading on the asset pipeline: http://guides.rubyonrails.org/asset_pipeline.html – sevenseacat Jun 11 '13 at 08:56
@sevenseacat Thanks. I was aware of the asset pipeline and I wanted to know how to deal with "controller-specific" javascript files. I could find the answer at http://stackoverflow.com/questions/6167805/using-rails-3-1-where-do-you-put-your-page-specific-javascript-code, but it's only useful after I get rid of `require_tree`. That would cause manual configuration of javascript imports so I just reverted back to doing `` in my view file. – Maximus S Jun 11 '13 at 09:39
Removing the `require_tree` is what most people do. However, including JS on one page isn't very common - it kinda defeats what the pipeline is about, that is, minifying and smooshing all your JS together into a single file for easy serving/caching/etc. Doing inline scripting like that is most definitely not recommended. – sevenseacat Jun 12 '13 at 02:56

Basic questions about javascript

1 Answers1

Linked

Related