单击确认对话框确定后立即隐藏导轨4 + jquery + simple_form中的按钮

Question

在我的一个观点中，我有这段代码：

 <%= simple_form_for upload,  :remote => true  do |f| %>
 <%= f.hidden_field :id, :value => upload.id %>
 <%= f.hidden_field :job, :value => "parse"%>
<%if (upload.status == 0)%>
    <%= f.button :submit, "Delete Entry:\n#{upload.sourcedata_file_name} from Database", :class=>"add_data_button" %>
<%elsif (upload.status == 1)%>
    <%= f.button :submit, "Add \n#{upload.sourcedata_file_name}\n to Database",:confirm=> "Start File parsing?", :class=> "add_data_button" %>
<%elsif (upload.status == 2)%>
    <%= "File has already been added to DB" %>
<%elsif (upload.status == 3)%>
    <%= "File is currently being added to DB" %>
<%else %>
    <%= "File has been removed from server" %>
<%end%>
 <% end %>

呈现这样的东西：

如果用户在对话框上按OK，则会在服务器的后台开始处理但按钮仍然可见。我喜欢做的是，如果用户单击“确定”，则立即禁用该按钮。

我知道我可以在JQuery中做到这一点。多数民众赞成我可以处理on_confirm botton OK点击事件。但我在互联网上找不到任何示例代码。

由于

Answer 1

而不是以下：

<%= f.button :submit, "Add \n#{upload.sourcedata_file_name}\n to Database",:confirm=> "Start File parsing?", :class=> "add_data_button" %>

将按钮更改为：

<%= f.button :submit, "Add \n#{upload.sourcedata_file_name}\n to Database", :id=>'btn1' :class=> "add_data_button" %>

并在您的JS文件中，执行以下操作：

$('#btn1').click(function(){
  if (confirm("Start File parsing?")) {
    $('#btn1').addClass('disabled hide').removeClass('show');
    // Write code to submit your form.
  } else {
    return false;
    // Ensure that your form doesn't gets submitted here.
  }
});

PS：我认为可能有多个这样的表单可能会循环，因此您可以添加一个类来提交按钮＆amp;绑定该类的javascript事件。