Rails +单选按钮+ AJAX:如何在单选按钮上显示部分内容?

时间:2022-10-08 13:36:46

I have a check out form for my ecommerce site. It has radio buttons for shipping options (express, standard, etc) and I want it to show a dynamic value of <%= shipping_delivered_day %> to appear inside the p.label_delivery_date tag next to the button the user clicks using AJAX. This is my html:

我有一个电子商务网站的退房表。它有发送选项(express、standard等)的单选按钮,我希望它显示一个动态值<%= shipping_delivered_day %>,显示在p中。label_delivery_date标记位于用户使用AJAX单击的按钮旁边。这是我的html:

<% @shipping_services.each do |ship| %>
  <%
    shipping_service = ShippingService.find_by_name(ship.shipping_service)
    ship_id_value = ""+shipping_service.id.to_s
  %>
  <label class="reverse-label">
    <span class="check">
        <%= radio_button :shipment, :desired_shipping_method, ship_id_value, :checked => "checked" %>
        <%= radio_button :shipment, :desired_shipping_method, ship_id_value "%>
    </span>

    <span class="label">
      <%= shipping_service.description %>
      <p class="label_delivery_date" ></p>
    </span>
    <span class="label">
      <%= shipping_service.description %>
    </span>
  </label>

<% end %>

I know I can do an :onclick option on my radio button, but that would just send me to a javascript file. I need to be able to pass in my dynamic shipping_delivered_day value, so I need rails to handle it. How would I send JS request from a radio button click?

我知道我可以在我的单选按钮上做一个:onclick选项,但那只会把我发送到一个javascript文件。我需要能够传递我的动态shipping_delivered_day值,所以我需要rails来处理它。如何从单选按钮单击发送JS请求?

1 个解决方案

#1


2  

Ruby/Rails actually provides a pretty slick way of doing this. All you have to do is have your radio button call a javascript function on click, and then put the partial render in that function, like so:

Ruby/Rails实际上提供了一种非常巧妙的方法。你所要做的就是让你的单选按钮在点击时调用一个javascript函数,然后在这个函数中放入部分渲染,如下所示:

<script>
function render_partial() {
  $('#partial-area').html('<%=j render :partial => "partial" %>')
}
</script>

<%=  radio_button :model, :field, :value, :onclick => "render_partial();" %>
<div id="partial-area"></div>

This will render the given partial into the 'partial-area' div when the radio button is clicked. For multiple partials, just have multiple functions acting on the same div. In your specific instance, you'll want your partial to contain some code that will determine your shipping delivery date. You could render the partial with locals (render :partial => "ship_3day", :locals => {:p => @product}) and have your partial return the appropriate result (<%= p.shipping_delivered_day %>).

这将在单击单选按钮时将给定的部分呈现到“局部区域”div中。对于多个部分,只要有多个函数作用于同一个div。在您的特定实例中,您将希望您的部分包含一些代码,这些代码将确定您的发货日期。您可以将局部变量呈现给局部变量(渲染:局部=>“ship_3day”,:local => {:p => @product}),并将您的部分返回适当的结果(<%= p)。shipping_delivered_day % >)。

#1


2  

Ruby/Rails actually provides a pretty slick way of doing this. All you have to do is have your radio button call a javascript function on click, and then put the partial render in that function, like so:

Ruby/Rails实际上提供了一种非常巧妙的方法。你所要做的就是让你的单选按钮在点击时调用一个javascript函数,然后在这个函数中放入部分渲染,如下所示:

<script>
function render_partial() {
  $('#partial-area').html('<%=j render :partial => "partial" %>')
}
</script>

<%=  radio_button :model, :field, :value, :onclick => "render_partial();" %>
<div id="partial-area"></div>

This will render the given partial into the 'partial-area' div when the radio button is clicked. For multiple partials, just have multiple functions acting on the same div. In your specific instance, you'll want your partial to contain some code that will determine your shipping delivery date. You could render the partial with locals (render :partial => "ship_3day", :locals => {:p => @product}) and have your partial return the appropriate result (<%= p.shipping_delivered_day %>).

这将在单击单选按钮时将给定的部分呈现到“局部区域”div中。对于多个部分,只要有多个函数作用于同一个div。在您的特定实例中,您将希望您的部分包含一些代码,这些代码将确定您的发货日期。您可以将局部变量呈现给局部变量(渲染:局部=>“ship_3day”,:local => {:p => @product}),并将您的部分返回适当的结果(<%= p)。shipping_delivered_day % >)。