在 Rails 4.1.4 中动态更改 div 内容

Question

我几乎一整天都在试图弄清楚如何解决这个难题，但不幸的是，我发现的大多数解决方案都与仍然允许在资产中使用“渲染”的过时 Rails 版本有关。

这是我想要做的：
我的视图找到每个“Trip”条目并将每个条目显示为页面上的缩略图。当用户单击每个缩略图时，我希望在这些缩略图下方的 Div 中呈现其他详细信息（以及关联，每次旅行都有一个 has_many: 周）（替换以前的内容）。

我似乎无法让 Ajax 工作，经过几个小时的尝试终于了解到“渲染”不能用于资产。如果有人可以提供有关 Rails 4 的 Ajax 的可能参考指南，我将真诚地感谢任何帮助和潜在的解决方案，这将是非常棒的，因为我似乎找不到。

这是我的代码：

查看 - index.html.erb

<div>
<ul class="thumbnails col-md-offset-2">
    <% Trip.find_each do |trip| %>
    <li class="col-md-3" style="list-style-type:none;">
        <%= link_to image_tag("http://placehold.it/350x350", :border => 0), :class => 'thumbnail', :url=>'/trips/selected_trip/params', :remote => true %>
        <h3><%= trip.name %></h3>
    </li>
    <% end %>
</ul>
    <div id="selected_trip">
    </div>
</div>

控制器 - trips.controller.rb

class TripsController < ApplicationController
before_filter :authenticate_user!
after_action :verify_authorized

def index
    @trips = Trip.all
    authorize Trip
end

def new
    @trip = Trip.new
    authorize Trip
end

def create
    @trip = Trip.new(trip_params)
    authorize Trip

    if @trip.save
        flash[:notice] = "New trip has been created."
        redirect_to @trip
    else
        #Fill me in
    end
end

def edit
    @trip = Trip.find(params[:id])
    authorize Trip
end

def update
    @trip = Trip.find(params[:id])
    authorize Trip
    @trip.update(trip_params)
    flash[:notice] = "Trip has been updated."
    redirect_to @trip
end

def show
    @trip = Trip.find(params[:id])
    authorize Trip
end

def destroy
    @trip = Trip.find(params[:id])
    authorize Trip
    @trip.destroy

    flash[:notice] = "Trip has been deleted."

    redirect_to trips_path
end

def selected_trip
  @trip = Trip.find(params[:id])
  @trip.name

  respond_to do |format|
    format.js
  end
end
end

private
    def trip_params
        params.require(:trip).permit(:name, :description, :status)
    end
end

Javascript - trips.js.erb（我知道这个方法不再适用于渲染在资产中不可用）

$('#selected_trip').html("<%= escape_javascript(render :partial => 'selected_trip', :content_type => 'text/html'%>")

部分 - _selected_trip.html.erb

<p>Success!</p> <!-- Just for testing, will replace with actual content -->

谢谢， 内特

晚上 11:10 编辑（有效）- 我已将控制器更改为：

def selected_trip
  @trip = Trip.find(params[:id])
  authorize Trip
  render :partial => 'selected_trip', :content_type => 'text/html'
end

我的看法：

<div>
<ul class="thumbnails col-md-offset-2">
    <% Trip.find_each do |trip| %>
    <li class="col-md-3" style="list-style-type:none;" data-tripID="<%= trip.id %>">
        <%= link_to image_tag("http://placehold.it/350x350", :border => 0), selected_trip_trip_path(trip), :class => 'thumbnail', :remote => true %>
        <h3><%= trip.name %></h3>
    </li>
    <% end %>
</ul>
    <div id="selected_trip">
    </div>
</div>
</div>
<script>
$('a.thumbnail').on('ajax:success', function(evt, data) {
  var target = $('#selected_trip');
  $(target).html(data);
});
</script>

Answer 1

如果你想避免从资产渲染，你可以尝试这样做。

我假设您知道需要将侦听器放置在哪里才能捕获 AJAX 调用，并且您还可以弄清楚当 AJAX 返回成功状态时要将结果放置在哪里。然后，你想做这样的事情：

$('whatever_container_they_can_click').on('ajax:success', function(evt, data) {
  var target = $('#selected_trip'); // Find where is the destination
  $(target).html(data);
});

将您的控制器操作更改为：

def selected_trip
  @trip = Trip.find(params[:id])
  render :partial => 'selected_trip', :content_type => 'text/html'
end