如何通过 Ajax 调用显示操作

Question

我只是想从这个问题开始，使用 Ajax 在我的索引操作中显示内容。我有这个控制器设置：

 class GalleriesController < ApplicationController

 def index
   @galleries = Gallery.all
 end

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

end

我的索引页上有一个画廊：

<ul id="portfolio-grid">
  <% @galleries.each do |g| %>
  <li class="mix <%= g.category.name %> mix_all">
    <% g.gallery_images.take(1).each do |i| %>
    <%= image_tag(i.photo.url(:gallery_portfolio_home), class: 'open-project') %>
    <a href='<%= gallery_path(id: g.id) %>' class="open-project">
    <% end %>
      <div class="project-overlay">
        <i class="fa fa-plus-circle fa-3x"></i>
        <span class="project-name"><%= g.title %></span>
        <span><%= g.category.name %></span>         
      </div>
    </a>
  </li>
  <% end %>
</ul>

  <!-- Ajax Loaded -->
<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 -->

当我点击一张图片时，我想将我的展示页面的内容填充到我的 div #project-content 中，此时我的展示页面如下所示：

<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>

从哪里开始比较好，我需要考虑什么才能让它发挥作用？

Answer 1

我们可以通过UJS 来实现，为此您需要在您的anchor_tag 中添加remote: true

<ul id="portfolio-grid">
  <% @galleries.each do |g| %>
  <li class="mix <%= g.category.name %> mix_all">
    <% g.gallery_images.take(1).each do |i| %>
    <%= image_tag(i.photo.url(:gallery_portfolio_home), class: 'open-project') %>
    <%= link_to "", gallery_path(g), remote: true %>
    <% end %>
      <div class="project-overlay">
        <i class="fa fa-plus-circle fa-3x"></i>
        <span class="project-name"><%= g.title %></span>
        <span><%= g.category.name %></span>         
      </div>
    </a>
  </li>
  <% end %>
</ul>

为此，我们需要添加一个视图文件'show.js.erb'。现在这里是这个文件的以下代码。

$('#project-content').html("<%= j render '/galleries/gallery'%>")

在gallery/中，我们需要创建一个名为_gallery.html.rb的部分。并且需要放内容

<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>

或者您可以执行 RSB 建议的普通 AJAX。在你的表演动作中，你需要添加render layout: false

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

Answer 2

如果只有ajax那么你可以使用这个

$.ajax({
    type: "GET",
    url: "/galleries/"+id,
})