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.

Was it helpful?

Solution

Error was with store script - show.js.haml

I have change @products to my partial name:



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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top