Infinite scrolling in rails with haml

Question

I'm trying to implement infinite scrolling into my project. I have do everything as in this howto: https://github.com/amatsuda/kaminari/wiki/How-To:-Create-Infinite-Scrolling-with-jQuery But it's not working for me :(

Controller:



      def show
        category = Category.find(params[:id])
        products = category.products.page(params[:page])
        @category = CategoryDecorator.decorate(category)
        @products = ProductDecorator.decorate_collection(products)

        respond_to do |format|
          format.js
          format.html
          format.xml  { render :xml => @products }
        end    
      end

show.html.haml:



    #products_list
      %page
        = render 'products_list'

    :javascript  
      $(function() {
        var page = 1,
            loading = false;

        function nearBottomOfPage() {
          return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
        }

        $(window).scroll(function(){
          if (loading) {
            return;
          }

          if(nearBottomOfPage()) {
            loading=true;
            page++;
            $.ajax({
              url: '/universes/nautique/sports/surfwear/categories/boarshorts?per_page=' + page,
              type: 'get',
              dataType: 'script',
              success: function() {
                $(window).sausage('draw');
                loading=false;
              }
            });
          }
        });

        $(window).sausage();
      }());

    - content_for :javascript do
      = javascript_include_tag "jquery.sausage"

Partial _products_list.html.haml:



    - @products.each_with_index do |product,index|
      .block-prodlist{ data: { index: product.id } }
        .inner.onfocus
          .selection
            %label AJOUTER À MA SÉLECTION
            %input.chk{:name => "", :type => "checkbox", :value => ""}/
          .thumbproduit
            = index
            %img{:alt => "Produit", :height => "194", :src => "/assets/editorial/produit1.jpg", :width => "194"}/
            .prixcaption -20%
          .context
            %h3 
              = product.brand_name

And show.js.haml:



    $("#products_list").append("#{escape_javascript(render(@products))}");

I don't see show.js in my firebug.

/;It's not working or me". How is it not working (other than not scrolling, I mean what exactly do you see). Are you seeing errors in the javascript console? — Michael Durrant, Apr 13 '13 at 15:03
You'll need to know the javscript console and use of web developer tools to basically get anywhere with this stuff. Actual implementation (of such tools) depends on your browser. The best developers I know are using Chrome a lot these days. Helps explain whyit's market share has gone from 0% to 50% in just 4 years! — Michael Durrant, Apr 13 '13 at 15:04

score 0 · Accepted Answer · answered Apr 13 '13 at 17:03

0

Error was with store script - show.js.haml

I have change @products to my partial name:



     $("#products_list").append("#{escape_javascript(render('products_list'))}");

answered Apr 13 '13 at 17:03

bmalets

3,207
7
35
64

Infinite scrolling in rails with haml

1 Answers1