用Javascript呈现部分内容

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

经过大量的搜索，我碰到这个帖子：Rails + Radio Buttons + AJAX: How to render partial on radio button click?。它给了我使用partials的想法;但是答案并没有为我提供足够的指导，所以我对部分内容做了一些解读。我结束了以下内容：

在我的主要观点

<% @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。

来源

2015-09-28 Shane McGarry

Where /什么是“Javascript文件”？ –

如果您点击单选按钮时只显示少量额外信息 - 并且不想打扰AJAX - 您可以将div存在于页面中但使用CSS隐藏（例如'display：none ;'）。然后当点击单选按钮时，JavaScript函数会显示div。 – bunnmatt

您需要向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文件中的部分替换，例如room_rate.js

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

来源

2015-09-29 02:51:13

那么我需要为此创建一个完全不同的控制器吗？ room_rate控制器也具有相关视图？或者你的意思是使用现有的控制器和room_rate（或类似的东西）是在控制器中定义的动作和相关的视图？只是想澄清。 –

对不起，我不清楚。它不需要是它自己的控制器，只需要一个具有相关视图的操作（* .js文件是ajax请求的视图），当然还有一条到该操作的路径。然后在$ .ajax调用中使用该路由到该路由。 –

我更新了参考控制器操作的答案，而不是控制器 –

用Javascript呈现部分内容

回答

相关问题