0

我使用这个 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

  <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 中的一条新闻,您将被带到显示页面向上滚动,您会注意到滑块仍然存在......点击刷新,滑块将消失......

我该如何解决这个问题?

4

2 回答 2

0

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

于 2012-12-20T21:44:27.603 回答
0

这并不能直接回答您的问题,但可以解决您的问题:我尝试了很多不同的 ajax will_paginate 解决方案,但没有一个符合我的要求。然后我继续使用普通的 will_paginate gem 并编写了一个自定义链接渲染器,将它们创建为基于 ajax 的。完整的解决方案发布在这里

于 2012-12-20T21:46:07.627 回答