jquery - 如何通过 Ajax 调用显示操作

Question

我只是在寻找一个开始解决这个问题的地方，使用 Ajax 在我的索引操作中显示内容。我有这个 Controller 设置:

 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>

为此，我们需要添加一个 View 文件'show.js.erb'。现在该文件的代码如下。

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

在 gallerys/中，我们需要创建一个名为 _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>

或者您可以执行普通的 AJAX，这是 RSB 建议的。为此，您需要在显示操作中添加 render layout: false

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