javascript - 在 Rails 4.1.4 中动态更改 Div 内容

Question

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

这是我正在尝试做的事情:
我的 View 找到每个“旅行”条目并将每个条目显示为页面上的缩略图。当用户单击每个缩略图时，我希望在这些缩略图下方的 Div 中呈现其他详细信息(以及关联，每次旅行都有一个 has_many: weeks)(替换以前的内容)。

我似乎无法让 Ajax 工作，经过几个小时的尝试，我终于了解到“渲染”不能用于 Assets 。如果有人可以为使用 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>

Controller - 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(我知道这种方法不再适用于渲染在 Assets 中不可用)

$('#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(有效)-我已将 Controller 更改为:

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

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

我假设您知道需要将监听器放在哪里以捕获 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);
});

将您的 Controller 操作更改为:

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