Rails——如何让远程表单响应JS?

时间:2021-12-25 07:21:09

I have a page that list items. Below each item it lists out any comments for that item (comments is a nested resource under items).

我有一个列出项目的页面。在每个条目下面,它列出该条目的任何注释(注释是条目下的嵌套资源)。

You can add a new comment in-line on the items page. When you do that, it was reloading the whole page so I want to change it to use Ajax and just use jQuery to insert the comment.

您可以在items页面中添加一个新注释。当你这样做的时候,它正在重载整个页面,所以我想把它改为使用Ajax,然后使用jQuery插入注释。

So I changed my comments/_form.html.erb to use :remote=>true

所以我修改了注释/_form.html。使用erb:远程= > true

<%= form_for([@item,@comment], :remote=>true) do |f| %>

I added a format.js in my comments_controller:

我添加了一个格式。在我comments_controller js:

def create
  @comment = Comment.new(params[:comment])
  @comment.save

  respond_to do |format|
    format.js
    format.html { redirect_to items_path}
  end
end

And created a simple comments/create.js.erb to insert the new comment onto the page:

并创建了一个简单的comments/create.js。erb将新注释插入页面:

$("#comments").append("<%= j(render(@comment)) %>");

However, when I submit a comment (even with the :remote=>true on the form) it keeps reloading the whole page/ignoring my .js file.

但是,当我提交一个注释(即使表单上的:remote=>为true)时,它会继续重载整个页面/忽略我的.js文件。

So I deleted format.html from the respond_to (since I don't want to use that option), but then it gives me the error Completed 406 Not Acceptable in 4ms (ActiveRecord: 0.2ms)

所以我删除格式。来自respond_to的html(因为我不想使用那个选项),但是它给了我在4ms中不能接受的完成了406的错误(ActiveRecord: 0.2ms)

How can I get it to stay on the current page and respond with my create.js?

我如何让它停留在当前页面上并使用我的create.js进行响应?

2 个解决方案

#1


4  

I just found the problem:

我刚刚发现了问题:

I was submitting my comments form with javascript: this.form.submit(). That worked fine when I wasn't using :remote=>true. However for some reason breaks when I make the form :remote=>true.

我用javascript: this.form.submit()提交我的评论表单。当我不使用时,它工作得很好:remote=>true。然而,由于某些原因,当我使form:remote=>为true时,它就崩溃了。

If I use an actual submit button, the code in my question works fine.

如果我使用一个实际的提交按钮,我的问题中的代码可以正常工作。

OR if I change my JavaScript from this.form.submit() to using jQuery to select the form by id and submit that, that works too:

或者,如果我将JavaScript从this.form.submit()更改为使用jQuery通过id选择表单并提交该表单,也可以:

$("#new_comment_<%= @item.id %>").submit();

#2


1  

You should add :format => :js onto your form_for

您应该在form_for中添加:format =>:js

And possibly update,

并可能更新,

format.js { render :nothing => true } 

#1


4  

I just found the problem:

我刚刚发现了问题:

I was submitting my comments form with javascript: this.form.submit(). That worked fine when I wasn't using :remote=>true. However for some reason breaks when I make the form :remote=>true.

我用javascript: this.form.submit()提交我的评论表单。当我不使用时,它工作得很好:remote=>true。然而,由于某些原因,当我使form:remote=>为true时,它就崩溃了。

If I use an actual submit button, the code in my question works fine.

如果我使用一个实际的提交按钮,我的问题中的代码可以正常工作。

OR if I change my JavaScript from this.form.submit() to using jQuery to select the form by id and submit that, that works too:

或者,如果我将JavaScript从this.form.submit()更改为使用jQuery通过id选择表单并提交该表单,也可以:

$("#new_comment_<%= @item.id %>").submit();

#2


1  

You should add :format => :js onto your form_for

您应该在form_for中添加:format =>:js

And possibly update,

并可能更新,

format.js { render :nothing => true }