在 Rails 中使用 .load() 处理 Ajax 调用

Question

单击链接后，我想进行 Ajax 调用以在索引页上的显示操作中呈现内容。 到目前为止，我有一个使用 jQuery 的.load()方法的解决方案，但我遇到了一个问题，它两次加载我的资产并复制内容。

查看以下设置后，是否有更好的方法来使其工作（我读过人们创建 js.erb 文件？）或修复我目前拥有的内容

控制器

def show
  @gallery = Gallery.find(params[:id])
end

索引页

<!-- Portfolio Section -->    
<section id="portfolio" class="section">
<div class="container">
  <div class="title col-md-8 col-sm-10 col-xs-12">
    <h1>Our <strong>Portfolio</strong></h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <!-- Portfolio Filters -->
  <ul id="filters">
    <li class="filter" data-filter="all">All</li>
      <li class="filter" data-filter="Plastering">Plastering</li>
      <li class="filter" data-filter="Plumbing">Plumbing</li>
      <li class="filter" data-filter="Bathroom Fitting">Bathroom Fitting</li>
      <li class="filter" data-filter="Construction">Construction</li>
  </ul>
  <!-- End Portfolio Filters -->
</div>
<div class="portfolio-top"></div> 
<!-- Portfolio Grid -->
<ul id="portfolio-grid">
  <li class="mix Plastering mix_all">
    <img alt="Gallery portfolio home" class="open-project" src="http://mybucket.s3.amazonaws.com/images/gallery_images/38/gallery_portfolio_home.jpg?1397059278" />
    <a href='/galleries/22' class="open-project">
      <div class="project-overlay">
        <i class="fa fa-plus-circle fa-3x"></i>
        <span class="project-name">Test</span>
        <span>Plastering</span>         
      </div>
    </a>
  </li>
</ul>
<!-- End Portfolio Grid -->
<!-- Ajax Loaded Portfolio -->
<div id="project-extended">
  <div class="container">
    <ul id="project-controls">
      <li>
        <a href="#" id="close-project">
          <i class="fa fa-times fa-2x"></i>
        </a>
      </li>
    </ul>
    <div id="project-content"></div>
  </div>
</div>
<!-- End Ajax Loaded Portfolio -->
<div class="portfolio-bottom"></div>   

显示动作

<div id="project">
 <div class="col-md-6">
  <div class="project-media">
    <div class="project-slider">
       <ul class="slides">
        <% @gallery.gallery_images.each do |image| %>
          <li><%= image_tag(image.photo.url(:gallery_flexslider)) %>
              <p class="flex-caption"><%= image.gallery_category.name %></p>  
            </li>
        <% end %>
       </ul>
   </div>
 </div>
</div>

<div class="col-md-6">
  <div class="project-info">
   <h1><%= @gallery.title %></h1>
  </div>

<div class="project-category">
  <span class="border"></span>
  <span><%= @gallery.category.name %></span>
  <span class="border"></span>
 </div>
  <p class="center"><%= @gallery.overview %></p>

 </div>
</div><!--/#project -->

所以这里的想法是将 show action 内容附加到索引页面的 #project-content 中

js

  //Portfolio Project Loading
  $('.open-project').click(function(){
    var projectUrl = $(this).attr("href");   

    $('#project-content').animate({opacity:0}, 400,function(){
    $("#project-content").load(projectUrl);
    $('#project-content').delay(400).animate({opacity:1}, 400);
  });  

  //Project Page Open
    $('#project-extended').slideUp(600, function(){
    $('#project-extended').addClass('open');
    $('html, body').animate({ scrollTop: $(".portfolio-bottom").offset().top }, 900);
    }).delay(500).slideDown(600,function(){          
      $('#project-content').fadeIn('slow',function(){
        if ($('.project-slider').length > 0) {
        initProjectSlider();
      }
    });
   });

   return false;       

   });

处理这个问题的最佳方法是什么？

编辑

资产被加载两次

Answer 1

这可能是由于您使用 XHR 请求加载布局所致。 你应该试试这个：

#app/controllers/application_controller.rb
layout Proc.new {|controller| controller.request.xhr? ? false : "application" }