Rails 4-- coffeescript not executing in partial

Question

I have a view that will show sports teams. When you click on a team an information tab gets populated with schedule, roster, etc. via ajax, which calls the controller to handle a call to an external API or the local DB (depending on the data to show). The ajax then renders a partial with the returned data, via a coffeescript file.

So far it's all working great -- but the returned partial in the coffeescript never gets executed. You can see a jsfiddle with the exact js returned by the partial here: http://jsfiddle.net/43XAQ/1/

The coffeescript file looks like this:

$(document).ready -> // same issue with or without the document.ready
  <% @poll.each do |p| %>
    $ = jQuery; // tried with and without this line-- no change
    $('#poll_body').append("<%= j render(partial: 'poll/place', locals: { place: p }) %>")
  <% end %>

The view it's loading has a simple table, like in the fiddle above.

I thought that it was turbolinks causing it, since I'd had that problem on other js elements-- but I installed the jquery-turbolinks gem and it resolved the other issues, but not this one. The exact same code works great in the jsfiddle but not in my local site. So I assume there is something to do with how Rails loads the js?

EDIT: yes, I used dev tools to look at the returned content. Sorry if that was unclear-- it's exactly what is pasted as the js component in the fiddle I linked above:

    (function() {
        var $;
        $ = jQuery;
        return $('#poll_body').append("<tr>\n   <td>10<\/td>\n  <td><a href=\"/team/236\">Oklahoma State Cowboys<\/a><\/td>\n   <td>AP Poll<\/td>\n <td>3<\/td>\n <\/tr>");
      });

    }).call(this);

EDIT2:

A few more points:

1) if I do nothing in the coffescript file except alert or console log, it still doesn't do anything.

2) the actual call to the controller that invokes the coffeescript is a standard jQuery click event. There is a polls.js file loaded in the poll view, which does this:

$( document ).ready(function() {
  $('#poll').on('click', '.poll-item', function(){  
    doActive(this);
    current_team = this.id;
  });
});

// snip //
var doActive = function(el){
    // some other stuff
    getNews(current_team); // calls a webservice via ajax, works fine.
    getRoster(current_team); // calls a webservice via ajax, works fine.
    getPolls(current_team);  // calls the controller via ajax, returns coffeescript properly, coffeescript never gets executed    
}

Have you used Developer tools to directly look at the returned content? — noel, Jun 13 '14 at 16:15
since it's an ajax call therefore you should look into developer console if ajax request is being called or not and if it's being called then are there any errors? If there are not any errors then try a simple alert inside your coffeescript file — Mandeep, Jun 13 '14 at 17:31
remove your `document.ready`. It is not required. Usually the JS does not execute if there is some error. Check if the selector you are using is correct. Also put semicolon on the end of the JS lines. It should work. Try putting in alert() to check if it working — Aravind, Jun 13 '14 at 17:43
@noel-- yes, I used developer tools. Please see my edits above. — user101289, Jun 13 '14 at 21:43
@Aravind-- I added semicolons and an alert. No errors reported in console or logs, but no change in behavior. Nothing fires. — user101289, Jun 13 '14 at 21:46
Show us the view code that actually triggers the ajax request. Depending on the content-type it is possible your "code" is treated as json or text, and thus never executed, but assigned. — nathanvda, Jun 18 '14 at 16:26

score 1 · Answer 1 · answered Jun 17 '14 at 16:26

1

If it's an AJAX response then you don't need the $(document).ready(). That's fired when the page first loads, but I believe it's not fired again each time you receive a response.

answered Jun 17 '14 at 16:26

bratsche

2,666
20
23

Can you share with us exactly how you're making the request to the server then? – bratsche Jun 17 '14 at 21:17
@bratsche-- sure-- what would you like to see? – user101289 Jun 17 '14 at 22:10
Exactly what I asked for. How you're making the request. Like, is it a link_to? Is it a $.ajax happening somewhere? Can you share this (along with the parameters you're passing to them)? I'm asking because I've got a ton of places in my apps that are returning .js.erb files and they execute when the response is received. For fun I added a $(document).ready() into one of them earlier to see if that would break it, and it did, which is why I suggested you remove that. But since it didn't fix yours I'm guessing maybe there's something about the way you're making the request. – bratsche Jun 18 '14 at 02:16
I see what you were getting at. As it says in the question, it's activated by a click. So there's an element (button, basically) that is a team name. When you click on the team, an event is fired to populate some info tabs. The "pure" js tabs get populated fine. The one that calls a controller to return data to the js.erb returns the right response-- but it never does anything. – user101289 Jun 18 '14 at 02:30
Can you share the actual link_to() or button_to() or whatever that you're using to generate the link? – bratsche Jun 18 '14 at 02:31
Seeing the part of the view that renders the link/button and the controller action that renders the response would help. Is the response executed if you return nothing but `alert('works')`? – Arctodus Jun 18 '14 at 11:57

score 1 · Accepted Answer · answered Jun 18 '14 at 16:14

Unbelievable but apparently the problem was that the jQuery ajax function that was calling the controller action was defaulting to dataType: 'json' -- this made everything work as designed, but since the data was (presumably) being returned as json rather than js, the coffeescript wasn't being fired.

I rewrote all the js actions, since I'd done everything else I could think of, and that seems to have fixed it.

Thanks everyone for your thoughts and help.

score 0 · Answer 3 · edited May 23 '17 at 12:21

Turbolinks

The problem could be with turbolinks, as since you're trying to render an anonymous function with $(document).ready, which typically fails with turbolinks

I don't know if this is the actual issue, but you may wish to look at making your code more "turbolinks friendly":

#-> I hope you have `.erb`appended to this file - otherwise @polls won't owrk

polls ->
  <% @poll.each do |p| %>
    $ = jQuery; // tried with and without this line-- no change
    $('#poll_body').append("<%= j render(partial: 'poll/place', locals: { place: p }) %>")
  <% end %>

$(document).on "page:load ready", polls

EDIT - as I've just read you thought the issue was with Turbolinks, you may wish to discount my suggestions above (although I'll leave them up for ideas)

@RichPeck-- thanks-- I tried the code you posted, and it "works", in that it doesn't throw any errors, but the js code never gets executed, the same as my original problem! Seems so strange since the code is executed properly when using a regular page eg. in jsfiddle. — user101289, Jun 17 '14 at 15:53

Rails 4-- coffeescript not executing in partial

3 Answers3