单击提交按钮时触发Ajax调用

Question

在我的Rails 3.1应用程序中，我有一个Jquery对话框，点击时弹出，并且里面有一个提交按钮。我做了一些尝试，使这个'提交'按钮阿贾克斯。所以当它被点击时它会更新预约时间和日期。我有以下代码：

<% if @booking.id and current_user.is_booking_manager? %> 
<button id="confirm_appointment"> 
    test confirmation 
</button> 
<div style="display:none;"> 
    <div id="confirm_appointment_dialog" title="Test Confirm Booking"> 
     <%= form_for @booking, :url => booking_confirmation_path(@booking), :remote => true do |f| %> 
     <%= f.hidden_field :id %> 
     <%= f.datetime_select :confirmed_appointment %> 
     <br /> 
     <b>Clear provisional appointment:</b><%= check_box_tag "make_unexpected" %> 
     <br /> 
     <%= f.submit :class => 'submit_me' %> 
     <% end %> 
    </div> 
</div> 
<% end %> 

的application.js

$('.submit_me').bind('change', 
function() { 
    $(this).parents('form:first').submit(); 
}); 

有我丢失的东西

Answer 1

在处理JS请求后，您不会更新您的视图。首先，您需要为要更新的HTML元素添加一个ID。

你Pastie过这样的代码：

<tr> 
    <td><%= f.label :confirmed_appointment %></td> 
    <td> <% f.hidden_field :confirmed_appointment %> 
    <% if @booking.confirmed_appointment %> 
    <%= l @booking.confirmed_appointment %> 
    <% else %> <em>unconfirmed</em> <% end %> </td> 
</tr> 

为了可以很容易地引用您想在JavaScript中更新的一部分，让我们的ID添加到TD。

<td id="booking-confirmation"> <% f.hidden_field :confirmed_appointment %> 

之后，你需要在你的views /文件夹中创建一个update.js.erb。现在，你可以把线

$("#booking-confirmation").html("<%= l @booking.confirmed_appointment %>"); 

在那里，这将寻找与你的HTML ID为“预订，确认”字段和更新。

最后，一定要包括

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

在你的行动，让行动来响应JS调用。

Answer 2

变化bind('change') -> bind('click')

好吧，你这样做，稍有不妥，http://wowkhmer.com/2011/09/19/unobtrusive-ajax-with-rails-31/尝试使用本指南