Coffeescript cannot find div - railscast 114 revised

Question

Trying to follow the guide of railscast 114 with the endless page using will_paginate but I get an error from my coffeescript:

home.js.coffee

jQuery ->
if $('.pagination').length
  $(window).scroll ->
   url = $('.pagination .next_page').attr('href')
   if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
     $('.pagination').text("Fetching more products...")
     $.getScript(url)
$(window).scroll()

On the line:

   if $('.pagination').length

I get the following error:

Uncaught TypeError: Cannot read property 'length' of null

It seems like the script does not read my index file because the script can't find any of my div-boxes...

Please help... been stuck with this problem of the endless page for a week now.

Update coffeescript

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text("Fetching more products...")
        $.getScript(url)
    $(window).scroll()

Please note that the 'updated' version is functionally different. It will compile to different JavaScript code. I think you may fight two problems simultaneously here. — Artur Nowak, Feb 02 '13 at 21:01

score 1 · Answer 1 · answered Feb 02 '13 at 13:10

1

In order for this to work, you need to execute selectors after the DOM is loaded. You correctly defined a function in the first line to achieve that, but this function (that is executed on document.ready) has an empty body.

In simple words, indent all the code except for the first line by one level.

answered Feb 02 '13 at 13:10

Artur Nowak

5,254
3
22
32

Thanks for the quick reply! It does not seem like it is working... I really just copy-pasted the coffeescript code from the railscast but it did no quites seem to work. – OXp1845 Feb 02 '13 at 13:27
And if I try: $(document).ready -> alert 'blah' Before the if-statement I get the following error: Uncaught TypeError: Object # has no method 'ready' If that helps... – OXp1845 Feb 02 '13 at 13:36

score 0 · Answer 2 · answered Feb 02 '13 at 16:29

0

This was solved by moving the coffeescript into application.js, rewriting it in jQuery and then calling var $j = jQuery.noConflict(); and appending the $j sign in front of evert $-sign. Don't know why this worked. Think it has to do with multiple scripts running at the same time.

It now looks like this:

var $j = jQuery.noConflict();
$j(function() {
if ($j('.pagination').length) {
$j(window).scroll(function() {
var url;
url = $j('.pagination .next_page').attr('href');
if (url && $j(window).scrollTop() > $j(document).height() - $j(window).height() - 50) {
$j('.pagination').text("Fetching more products...");
return $j.getScript(url);
}
});
return $j(window).scroll();
}
})

answered Feb 02 '13 at 16:29

OXp1845

483
2
6
20

What other libraries do use use? MooTools? Zepto? Prototype? It's quite unusual to have conflicts with jQuery. – Artur Nowak Feb 02 '13 at 21:00
I was using Prototype. I am pretty sure I disabled it though. Took me forever to figure out how to go around the conflicts... *Note to anyone who had the same problem. You have to do the same thing in your index.js.erb – OXp1845 Feb 02 '13 at 22:07

Coffeescript cannot find div - railscast 114 revised

home.js.coffee

Update coffeescript

2 Answers2