使用 Javascript 渲染部分

Question

我有一个加载到单选按钮列表中的项目列表。单击其中一个项目时，我想在页面其他位置的 div 中显示有关该项目的其他信息。例如，我列出了一家酒店的不同类型的房间。如果用户单击特定房间类型，我想以不同的差异显示该房间的估计成本。

经过大量谷歌搜索，我发现了这个帖子：Rails + Radio Buttons + AJAX: How to render partial on radio button click?。它给了我使用部分的想法；但是答案并没有为我提供足够的指导，所以我对部分进行了一些阅读。我最终得到以下结果：

在我的主视图中

<% @available_rooms.each do |rt| %>
    <div class="radio-item">
        <%= b.radio_button :room_type, rt.id, :class => 'rb_room_type inline', :onclick => 'render_room_info();' %>
        <%= content_tag :span, rt.name  %>
        <a data-toggle="tooltip" data-placement="right" title="<%= rt.description %>">
            <%= image_tag "tooltip.png", :class=>"tooltip-icon" %>
        </a>
     </div>
 <% end %>

<div id="estimated-due" class="group column-2">
</div>

我的局部视图名为 _room_details.html.erb

<span class="booking-est-cost">Estimated Cost: &pound;<%= rt.room_price %></span>

Javascript 文件

function render_room_info() {
    $("#estimated-due").html("<%= j render :partial => 'room_details', locals => { :rt => @rt } %>");
}

从我读过的所有内容来看，这应该可行。但是，当我单击单选按钮时，它会在 div 中呈现文字 html 字符串：

<%= j render :partial => 'room_details', locals => { :rt => @rt } %>

很明显，rails 代码没有触发。由于 javascript 是客户端，我想这是有道理的，但我真的不知道如何使它工作。我读了几篇关于执行 ajax 请求的文章，但对于我需要做的事情来说，它们似乎都是严重的过度杀伤（更不用说过于复杂了）。我错过了一些简单的东西吗？我只需要在单击单选按钮时呈现一两个字段的值。

作为参考，我使用的是 Rails 4.2。

Answer 1

您需要向 rails 路由提交 ajax 请求。因为您是通过单选按钮执行此操作的，所以您可以执行以下操作：

function render_room_info() {
    $.ajax({
          url: room_rate?rt=xx,
          dataType: "script"
        });
}

那么上面指定的路由处的action需要响应一个ajax请求：

#some logic to get set the @rt variable
@rt = params[:rt]

respond_to do |format|
      format.html {
        }
      format.js {
        }
    end

然后您根据控制器操作的名称将指令替换为 js 文件中的部分内容，例如room_rate.js

$("#estimated-due").html("<%= j render :partial => 'room_details', locals => { :rt => @rt } %>");