Question

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

经过大量的谷歌搜索后，我发现了这篇文章：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"
        });
}

然后，上面指定的路线上的动作需要响应ajax请求：

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

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

然后根据控制器操作的名称将您的指令替换为js文件中的partial。 room_rate.js

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

使用Javascript

1 个答案: