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

Posted 2023-05-09

【中文标题】单击提交按钮时触发 Ajax 调用

【英文标题】：Firing Ajax call when click submit button

【发布时间】：2012-03-29 19:05:17

【问题描述】：

在我的 Rails 3.1 应用程序中，我有一个在单击时弹出的 Jquery 对话框，其中有一个提交按钮。我在制作这个“提交”按钮 ajax 方面做了一些尝试。因此，当它被点击时，它会更新约会时间和日期。我有以下代码：

<% 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();
); 

我有什么遗漏的吗

【问题讨论】：

重新加载页面后它会更新吗？在这种情况下，您需要定义 create.js.erb 或 update.js.erb 并在那里更新页面。此外，据我所知，绑定代码不是必需的，因为您的表单实例化中的 :remote => true 已经使表单“ajax”

是的，它会在页面重新加载后更新

所以你说我应该创建一个 update.js.erb 并将我的 javascript 放在里面？

您需要告诉您的浏览器重新加载页面中包含新信息的部分。您的控制器会自动查找具有在控制器中调用的操作名称的视图，这是您需要放置 javascript 以更新页面的位置。

所以我需要我的控制器查看js来查看控制器并做出响应？

【参考方案1】：

在处理 JS 请求后，您不会更新您的视图。首先，您需要为要更新的 html-Element 添加一个 id。

你的馅饼有这个代码：

<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 中引用您要更新的部分，让我们为该 td 添加一个 id。

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

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

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

在那里，它将在您的 HTML 中查找 ID 为“booking-confirmation”的字段并更新它。

最后，一定要包含

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

在你的action中，让action响应JS调用。

【参考方案2】：

更改bind('change') -> bind('click')

好吧，你做的有点不对，http://wowkhmer.com/2011/09/19/unobtrusive-ajax-with-rails-31/尝试使用这个指南

【讨论】：

我这样做了，但仍然遇到同样的事情。

但是，当我手动单击刷新按钮时，它会说它已经更新，这不是我应该做的