【问题标题】:Ruby on rails -- Jquery not submiting put request before another post requestRuby on rails -- Jquery 在另一个 post 请求之前没有提交 put 请求
【发布时间】:2019-07-20 03:40:14
【问题描述】:

我基本上想单击一个按钮,然后在用户单击另一个按钮时提交一个表单。表单被提交,但按钮没有被点击。

控制器中的方法(put):

def set_everything
    user.update_column(:everything_set, true)
end

然后我有一个表格:

<%= form_tag("http://someotherwebsite.com/post_method", method: :post, id:"form")%>
     <%= some_field %>
     <button type="button" id="form-button">Done</button>
<% end %>

然后在同一个视图上我还有另一个link_to:

<%= link_to set_everything_path, method: :put, id:"set-everything-button", style:"display:none" %>

我的 Jquery 代码:

$(document).ready(function(){
   $('#form-button').click(function(){
     $('#set-everything-button').trigger('click');
     setTimeout(function(){ $('form').submit();}, 2000);
   });
});

现在我也尝试使用 button_to 而不是 link_to,但它仍然没有被点击,当我手动尝试时它工作得很好。

【问题讨论】:

  • 为什么不将user.update_column(:everything_set, true) 添加到表单所在的控制器操作中?
  • 试试这个user.update_column(everything_set: true)。另外,请记住,当您使用update_column 时,会绕过所有常规更新过程。这意味着跳过验证、跳过回调并且不更新时间戳。
  • 为什么不直接通过$.ajax 在您的#form-button 点击处理程序中发送PUT 请求?您可以将目标网址存储在按钮上的数据属性中。
  • 这段代码似乎在很多方面都可能被破坏。不过,首先,您使用的是turbolinks吗?
  • 我不明白用例。为什么 2000 毫秒超时?表单按钮正在触发表单提交(因为您没有取消它),那么链接上的“点击”将触发另一个请求,然后在2s后您想触发另一个请求?听起来您可以只发送表格并根据同一请求执行任何 set_everything 操作,您能更好地解释一下您要做什么吗?听起来你试图以错误的方式解决问题。

标签: javascript jquery ruby-on-rails forms methods


【解决方案1】:

将目标网址放在按钮的数据属性中:

<button type="button" id="form-button" data-trigger-url="<%= set_everything_path %>">Done</button>

直接在您的点击处理程序中发送 PUT 请求:

$(document).ready(function(){
   $('#form-button').click(function(event){
     event.preventDefault();
     var form = $(this).closest('form');
     var url = $(this).data('trigger-url');
     $.ajax({
       url: url,
       method: 'PUT',
       dataType: 'html',
       success: function(){
         form.submit()
       }
     })
   });
});

不要忘记从控制器操作发回 200(OK)响应,以便 javascript 运行 success 处理程序(并因此提交表单):

def set_everything
  user.update_columns(everything_set: true)
  head :ok, content_type: "text/html"
end

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多