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>

或者你可以做普通的AJAX，RSB建议。对于show动作中的那个，您需要添加render layout: false

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

Answer 2

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

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

如何通过Ajax调用show action

2 个答案: