提交后清除Rails远程表格

问题描述：

我使用Rails 3与jQuery，并有一个简单的形式与单个文本输入和提交按钮。我已提交表格:remote => true，并且想要在表单提交后清除输入。我想这jQuery代码：提交后清除Rails远程表格

$('#new_message').submit(function() { $('#message_content').val(''); });

然而，这种清除输入表单提交之前，所以我最终提交一份空白表格。

了一下周围搜索后，我也试过以下版本：

$('#new_message').submit(function(e) { 
    e.preventDefault(); 
    this.submit(); 
    $('#message_content').val(''); 
});

...但这似乎覆盖:remote => true魔法，形式获取与重新加载整个页面提交。有任何想法吗？

答

当提交按钮被压制为标有remote => true的表单，rails.js中的JavaScript代码执行submit()。您无需重写功能。

在$(document).ready代替试试这个 -

（编辑：使用绑定，而不是活的感谢达伦·希克斯）

$("#new_message").bind("ajax:complete", function(event,xhr,status){ 
    $('#message_content').val(''); 
}

这增加了事件处理程序ajax:complete事件。当你的ajax-submit-form完成时，这个事件被解雇。更多here。

Oooh，这个工作吗？棒极了。 – CharlieMezak 2011-05-19 13:06:23

不错！我使用你的代码，但将事件改为'ajax：beforeSend'，它在提交时立即清除输入（而不是等待请求实际通过），但仍然正确发送数据。感谢您挖掘它！ – Grantovich 2011-05-19 16:40:02

如何在Coffeescript中做到这一点？ – tibbon 2012-04-12 21:44:59

答

在你的jquery函数中，通过get()进行提交。调用get（）后，将文本字段设置为空白。或者，您可以在您提供给get（）的成功回调中执行此操作，这将允许您从控制器获取一些信息，例如提交的文本字段值是否可接受。

嗯......我不怀疑这是否有效，但它似乎首先破坏了使用'：remote => true'的观点，因为你几乎可以重新实现它的所有功能。我可能会这样做是最后的手段，但如果这是做到这一点的唯一方法，我会感到惊讶（并且有点失望）。 – Grantovich 2011-05-19 06:40:07

答

在你行动 .js.erb文件

$('#message_content').attr('value','');

凡行动是方法名（你不要在你的问题状态）控制器

我想到了这一点，但这意味着等待整个请求/响应经过输入清除之前，这感觉相当滞后（如果用户不耐烦，可能会导致多个表单提交）。 abhishek的事件绑定解决方案，使用'ajax：beforeSend'，立即清除输入。 – Grantovich 2011-05-19 16:46:38

不够公平，如果ajax调用因任何原因失败并且您已清除输入框，则用户可能会感到恼火。他们是否得到任何其他视觉线索，请求已成功？ – Nick 2011-05-19 16:54:09

有问题的界面是基本的聊天室，所以当请求返回时，用户的消息会出现在聊天中。我认为在这种情况下，响应能力比能够重新提交消息而不重新输入它更重要，但我想我也可以保存提交的消息客户端并将其显示回用户（允许他们复制粘贴它）if ajax失败。 – Grantovich 2011-05-19 17:42:44

答

您可以触发一个Rails AJAX提交这样的：

$(this).trigger('submit.rails');

答

在你model.js文件

   $('#element_id').val(' ');

它的工作对我来说，你可以试试这个。