带有远程 => true 的 Rails 表单提交 -- JS 文件呈现但不执行

rails form submission with remote => true -- js file renders but does not execute

本文关键字：文件 JS 表单提交 执行 Rails true      更新时间：2023-09-26

这里和这里都有一个类似的问题，但都没有我正在寻找的答案。我也做了很多搜索"rails格式.js渲染"，但无法解决这个问题。

在 Rails 4 中，我有一个经过验证的表单，如下所示：

<%= form_for(@message, :remote => true) do |form| %>
// don't want to call the js on submit here because 
// I don't want it to execute if the form did not validate

我在控制器中调用 js：

def create
    @message = Message.new(params[:message])
      if @message.valid?
        NotificationsMailer.new_message(@message).deliver
        respond_to do |format|
          format.js { render "submit" }
        end
      else
        render :new
      end
  end

我在"消息"文件夹中有"submit.js.erb"：

alert('js was called!');

当我提交表单时，终端验证文件是否呈现：

Rendered messages/submit.js.erb (0.5ms)

。但在屏幕上，什么也没发生。没有警报，也没有执行的javascript。我还尝试创建"submit.html.erb"并将我的javscript包装在脚本标签中，同样的事情发生了 - 文件加载，但脚本不执行。

为什么？我需要做什么来告诉 Rails 执行 js？

编辑：在访问了Kelvo的资源并尝试了许多事情之后，答案似乎是将其添加到应用程序中.js...

 $.ajaxSetup({  
    'beforeSend': function (xhr) {xhr.setRequestHeader('Content-Type', 'application/javascript');}  
 });

事实证明，在我的实际"submit.js.erb"中手动换行和缩进（因为它没有在我的 IDE 中换行）导致它无法执行，因此确实存在两个问题。

这可能是由于未评估返回的内容。浏览器确实收到了文件，但不知道如何处理它，您必须包含一些 JavaScript 来处理响应，如下所述：

不过，您可能不想只是坐在那里填写<form>。您可能希望在成功提交后执行某些操作。为此，请绑定到 ajax：success 事件。失败时，使用 ajax：error。看看吧：

在您的情况下，您可以尝试 

$(document).ready(function(){
  $("#new_message").on("ajax:success", function (e, data, status, xhr){
     eval(xhr.responseText);
  });
});

为了评估JS代码。

您可以在此处阅读有关"数据远程"请求期间触发的事件的更多信息

编辑：忘了提，此脚本必须包含在包含表单的HTML文件中。也许只是将其添加到您的表单下。

这可能是由于返回的内容还包括您的默认布局。

试试这个：

格式.js {渲染布局："no_layout"，操作："提交"}

希望这有帮助...

相关文章：