Question

我使用此wiki https://github.com/ronalchn/ajax_pagination/wiki/Installing

添加了ajax_pagination

它有效，但是当我点击新闻部分中的链接时，顶部的滑块显示在显示页面上，而不是假设它在那里但是当你刷新页面时它会消失并恢复正常

有谁知道如何解决这个问题？

继承人的观点

batnews.html.erb

<div class="container">
  <br /><br />
  <h2 class="black">
    Featured Articles
   <div class="line_section"><div>
  </h2>
  <ul class="example2">
  <% @articles.each do |article| %>
    <li>
      <h2><%= link_to(article.title, article, style: 'color: #4C4C4C;') %></h2>

      <%= link_to image_tag(article.photo, style: 'width: 400px; float: left; margin-right: 20px; margin-top: -10px; height: 260px;'), article %>

          <div class="info" style="position: relative; right: -20px; top: -3px;">
            <img style="position: relative; top: -2px;" src="/assets/icon_calendar.png">
            <%= article.date %>
            <img style="position: relative; top: -2px;" src="/assets/icon_author.png">
             <%= article.author %>
            <img style="position: relative; top: -2px;" src="/assets/icon_talk.png">
            <!-- TODO make this link scroll down to comments section smoothly -->
             <%= link_to article.comments.count, article %> <%= link_to 'comments', article %></a>
          </div>
      <p style="width: 460px; float: right;"><%= truncate article.content, length: 400 %>
        <br />
        <%= link_to('Read More', article, style: 'font-size: 12px;') %></p>
     </li>
      <% end %>
   </ul>
  </div>

   <%= ajax_section :id => "recent_news", :render => "recent_news" %>

继承我的渲染_recent_news.html.erb

的paritial

  <div class="container">
   <br />
    <br />
    <h2 class="black">
      Recent News
       <div class="line_section"><div>
      </h2>
     <%= ajax_links :section_id => "recent_news" do %>
   <%= will_paginate @news_all %>
    <div class="row"> 
   <div class="span12">

    <ul class="recent-news"> 

    <% @news_all.each do |news| %>

    <li style="font-size: 16px; line-height: 19px; letter-spacing: 1px; font-size: 14px; color: #555; text-align: left;">
    <%= link_to image_tag(news.photo.url), news, class: 'pull-left', style: 'margin-right:40px; margin-top: 2px; width: 300px;' %> 
     <div style=" width: 600px; float: right;">
    <%= link_to news.title, news %> 

  <br />

   <%= link_to news.date, news, style: 'font-size: 10px; color: black; position: relative; top: 15px;' %> 

    <i style="position: relative; top: 18px;" class="icon-comment"><%= link_to   (news.comments.count), news, :style => 'font-size: 8px; color: white; font-weight: bold;    position: absolute; top: 0px; right: 5px;' %></i>
    <br /><br />
    <%= truncate news.content, length: 500 %> 
   <br />  
    <%= link_to 'Read More...', news, style: 'font-size: 12px !important;' %>
     </div>
   </li>
  <% end %> 
  <%= will_paginate @news_all %>
  <% end %>
  </div><!-- end span12 -->


 </div><!-- end row -->
   </div><!-- end container -->

继承我的控制器

static_pages_controller.rb

def batnews
  @articles = Article.all
  @news_all = News.all
  @news_all = News.paginate(page: params[:page], per_page: 4, :order => 'created_at DESC')
  @comment_count = Comment.count(:id)
  respond_to do |format|
  format.html # index.html.erb
  ajax_respond format, :section_id => "recent_news"
  end
end

这里是我的宝石

gem 'rails', '3.2.8'
gem 'bootstrap-sass', '2.0.4'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails', '2.0.2'
gem 'jquery-ui-rails'
gem "haml", "~> 3.1.7"
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'activerecord-reputation-system', require: 'reputation_system'
gem "paperclip", :git => "git://github.com/thoughtbot/paperclip.git"
gem 'aws-sdk'
gem 'friendly_id'
gem 'ajax_pagination'
gem "jquery-historyjs"

继承了网站的链接，您可以在其中看到我正在谈论http://www.batman-fansite.com/batnews

的行为

所以，如果你点击recent_news中的一个新闻，你将被带到显示页面向上滚动，你会发现滑块仍在那里....点击刷新，滑块将消失... < / p>

我该如何解决这个问题？

Answer 1

实际上有一个简单的解释，你的ajax只替换你<div id="recent_news" class="ajax_section">标签中的HTML。由于您的轮播不是recent_news的孩子，因此内容不会被新请求的HTML替换。一个简单的解决方案是将您的ajax选择包装在您想要替换的任何内容周围。

Answer 2

这并没有直接回答你的问题，但它可以解决你的问题：我尝试了很多不同的ajax will_paginate解决方案，没有人做我想要的。然后我继续使用普通的will_paginate gem并编写了一个自定义链接渲染器，将它们创建为基于ajax的。 full solution is posted here。

添加AJAX到will_paginate链接页面上显示的内容，这些内容不应该出现在那里

2 个答案: