jScroll for Rails中的无限滚动

时间:2014-01-30 07:16:27

标签: javascript jquery ruby-on-rails infinite-scroll

我是Rails和javascript的新手。我在rails上用ruby开发了一个小应用程序,它使用solr的太阳黑子搜索数据库中的产品。我曾经使用kaminari的分页显示内容。但现在我想把它取下并使用无限滚动代替。我指的是下面的无限卷轴。 https://github.com/pklauzinski/jscroll 我想将它集成到我的rails应用程序中。我该怎么做? 这是我的控制器代码:

             def show

                    if params[:name].nil?
                     @search = []
                    else
                     @search = Sunspot.search(Clothes) do
                     fulltext params[:name]
                     paginate :page => params[:page], :per_page => 24
                     order_by :maxprice
                    end


                  @results = @search.results
                  end
                flash[:alert] = "Enter something!"
                end

              def autocomplete
                 list=[] 
                 @res = Clothes.search do
                 fulltext params[:term]
                 paginate :page => 1, :per_page => 100
                 order_by :maxprice
                 end
               @rest = @res.results
               @rest.each do |brand|
               list << {"label"=>brand.name, "value"=>brand.name, "id"=>brand.id}
                end
               respond_to do |format|
               format.json{render :json=>list.to_json, :layout=>false}
                end
              end
             end

这是我的观看代码:

             <div id="container">

          <% for prod in @results %>
          <div class="product">
             <div class="image"><%= image_tag(prod.image, :alt => "logo", :size => "75x75") %> </div>
                <div class="name"><h3> <%= prod.name %> </h3></div>
                <div class="price"><h5>Old Price:</h5><%= prod.maxprice%></div><div class="price"> <h5>New Price:</h5><%= (prod.maxprice)-(prod.maxprice * prod.discount / 100) %></div>    
           </div>
           <% end %>
             <% else %>
               <div class="notice"><%= flash[:alert] %></div>

                 <% end %>
            </div>

我的自动完成和处理我的ajax的脚本代码。

                        <script>
                     $(document).ready(function() {
                    $.ajax({
                   url : "shirts/first",
                   type : "GET"
                    });
                 $("#name").autocomplete({
                 source : "shirts/autocomplete",
                 autoFocus : false,
                 minLength : 1,
                 select : function(event, ui) {
                 document.getElementById("name").value = ui.item.value;
            $.ajax({
            url : "shirts/show?name=" + ui.item.value,
            type : "GET"
            });
             }
               });
                     }); 
                     </script>

1 个答案:

答案 0 :(得分:0)

你可以用这个试试吧  http://railscasts.com/episodes/114-endless-page