Endless scrolling in rails

Question

I referred to http://railscasts.com/episodes/114-endless-page?autoplay=true to make use of endless scrolling in my project. In video everything he mentions are old i guess, so i tried modifying it to rails 4. The javascript file is

                     var currentPage = 1;

                        function checkScroll() {
                             if (nearBottomOfPage()) {
                                  currentPage++;
                                  new Ajax.Request('/shirts/first?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
                                  } else {
                                  setTimeout("checkScroll()", 250);
                             }
                          }

                        function nearBottomOfPage() {
                           return scrollDistanceFromBottom() < 150;
                        }

                        function scrollDistanceFromBottom(argument) {
                           return pageHeight() - (window.pageYOffset + self.innerHeight);
                        }

                        function pageHeight() {
                           return Math.max(document.body.scrollHeight, document.body.offsetHeight);
                        }

                        document.observe('dom:loaded', checkScroll);

And instead of using an rjs file I wrote the following code in .js.erb

                    if @first.total_pages > @first.current_page
                         page.call 'checkScroll'
                    else
                         page['#loading'].hide
                    end

Am I doing things correctly? And when I check my browser with firebug it says:

                      TypeError: document.observe is not a function
                      document.observe('dom:loaded', checkScroll);

What is wrong with my code? Can someone help me out with this?

Answer 1

I think that railscast example uses prototype.js instead of jQuery and I'm guessing you're using jQuery in your Rails 4 application, because I think document.observe is a method in prototype , not in jQuery.

You might want to look at the revised episode for endless scrolling , unfortunately it's not free but Ryan Bates from Railscast also shares his code on github so you can see the revised episode's code on github , which is Rails 3.1 and uses jQuery so probably easier to port to Rails 4.

Hope this helps.