远程表单不通过 ajax 发送答案

【问题标题】：form with remote doesn't send through ajax远程表单不通过 ajax 发送
【发布时间】：2016-02-24 17:49:12
【问题描述】：

所以我正在尝试按照本教程在我的网站上使用 rails 4 实现聊天 ==> http://josephndungu.com/tutorials/gmail-like-chat-application-in-ruby-on-rails

但是，我在聊天中发布新消息时遇到问题：表单提交正常（以 html 格式），这导致消息/创建缺少模板错误，这是可以预料的，因为我没有'没有 show.html.erb 由于我想通过 ajax 提交表单，所以我确实有一个名为 show.js.erb 的文件

这是生成表单的部分：

<div class="chatboxinput">
<%= form_for([@conversation, @message], :remote => true, :authenticity_token => true, :html => {id: "conversation_form_#{@conversation.id}"}) do |f| %>
  <%= f.text_area :body, class: "chatboxtextarea", "data-cid" => @conversation.id %>
<% end %>
</div>

这是我的消息控制器：

class MessagesController < ApplicationController
  before_filter :authenticate_user!

  def create
    @conversation = Conversation.find(params[:conversation_id])
    @message = @conversation.messages.build(message_params)
    @message.user_id = current_user.id
    @message.save!

    @path = conversation_path(@conversation)
  end

  private

  def message_params
    params.require(:message).permit(:body)
  end
end

我怀疑 jquery_ujs 有问题，因为在那之前我遇到了另一个 ajax 请求没有正确发送 csrf 令牌的问题，我不得不添加一行 js 来修复它。

这是 application.js

//= require jquery
//= require jquery_ujs
//= require chat
//= require jquery.turbolinks
//= require private_pub
//= require bootstrap-sprockets
//= require bootstrap-datepicker
//= require_tree .

和应用程序头部分

<meta content='<%= user_signed_in? ? current_user.id : "" %>' name='user-id'/>
<%= csrf_meta_tags %>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>


<%= yield(:head ) %>

我已经摸不着头脑了好几个小时了……有什么见解吗？

提前致谢！ :)

【问题讨论】：

听起来您需要在创建操作的末尾添加render。渲染聊天视图或类似render json: {"message" => "Success"}

标签： jquery ruby-on-rails ajax ujs

【解决方案1】：

我终于成功了。事实证明它最终与 jquery_ujs 有关。表单没有通过 ajax 正确提交，因此 rails 正在寻找 .html.erb 模板，而不是我拥有的 .js.erb。

我通过将 jquery_ujs 作为我的 appalication.js 清单的最后一行来解决它（即使在 require_tree 之后）。

//= require jquery
//= require users
//= require private_pub
//= require bootstrap-sprockets
//= require bootstrap-datepicker
//= require_tree .
//= require jquery_ujs
//= require jquery.turbolinks

希望这对其他人有所帮助！

【讨论】：