Rails 5，带有表单提交的简单JavaScript [英] Rails 5, simple javascript with form submit

问题描述

我希望有人可以在这里帮助我.在这里呆了几个小时，但似乎无法弄清楚为什么我的Javascript无法在我的简单表单上运行.我只是想使用ajax调用显示评论.我的application.js文件中有gem'jquery-rails'，并且有必需的jquery和jquery_ujs.这是我到目前为止的代码:

I am hoping someone can help me here. Been at this for a few hours, but can't seem to figure out why my Javascript is not working on my simple form. I'm simply trying to display comments using the ajax call. I have gem 'jquery-rails', and required jquery, and jquery_ujs in my application.js file. Here's the code I have so far:

我有一个带有很多评论的Joy模型.

I have a Joy model that has_many comments.

<% @joys.each do |joy| %>

<ul id="comments-<%= joy.id %>">
  <% joy.comments.where(void:'f').each do |comment| %>
    <li><%= comment.body %></li>
  <% end %>
</ul>

<%= form_with(model: [ joy.user, joy, joy.comments.build ], data:{ "js-comments-#{joy.id}" => true}) do |f| %>
  <%= f.text_area :body, :class=>'form-control', :required=>'true' %>
  <%= f.submit "Post Comment" %>
<% end %>

<script>
  $(document).ready(function() {
    $('[data-js-comments-<%= joy.id %>]').on("ajax:success", function(event, data, status, xhr){
      $('#comments-<%=joy.id%>').append(xhr.responseText);
    });
  });
</script>

<% end %>

在我的Comment控制器中，在创建"操作中，我有:

In my Comment controller, in my 'create' action, I have:

if @comment.save
  render partial: "comment", locals: {comment: @comment}
end

在我的评论"视图中，我创建了一个名为_comment.html.erb的局部文件:

In my Comment views, I created a partial, called _comment.html.erb:

<li>
    <%= comment.body %>
</li>

因此，现在当我输入评论并单击发布评论"时，它可以正确保存我的评论，但不会将评论添加到列表中.此外，该表格也不会刷新.文本保留在文本框中.直到刷新页面后，我的评论才会显示在列表中.任何对我缺少或做错事有任何想法的人吗???

So, now when I enter a comment, and click 'Post Comment', it correctly saves my Comment, but it does not ajax load the comment into list. Furthermore, the form does not refresh either. The text remains in the text box. It is not only until after I refresh the page when my comment shows up in the list. Anyone with any thoughts on what I'm missing or doing wrong???

我们非常感谢您的帮助.

Your help is greatly appreciated in advance.

推荐答案

form_with这是一个远程表单，您不需要该块<script>..</script>. 只需使用create.js.erb，然后使用jquery来添加新注释.

form_with it's a remote form, you dont need that block <script>..</script>. Just use create.js.erb then use jquery to append new comment.

如果要检查是否成功创建了消息，则可以在控制器中添加@status值.

And if you want to check if your message was created successfully, you can add a @status value in your controller.

//comments_controller.rb
def create
  ...
  if @comment.save
    @status = "success"
  else
    @status = "failed"
  end
  ...
end

//create.js.erb - for example
 $("#yourCommentList").append('<%= j( render partial: 'comments/comment', locals: @comment ) %>');
 <% if @status == "success" %>
   $("body").append(...your notification...)
    ...
 <% else %>
    ...
 <% end %>

这篇关于Rails 5，带有表单提交的简单JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！