AJAX与Rails 3.2提交表单 [英] AJAX a form submission with Rails 3.2

问题描述

这是我的表格，它可以正常工作，但是现在我想对其进行AJAX.

This is my form, and it works fine, but now I want to AJAX it.

<%= form_tag variant_path(variant.id), :method => :put, :class => 'update_inv_form' do %>  
  <%= text_field_tag :inventory_quantity, variant.inventory_quantity %>
  <%= submit_tag 'Update'  %>
<% end %>

当我添加:remote => true属性时，表单将通过AJAX成功提交(我可以看到它发生在服务器上，刷新页面后我也可以看到更改).我想适当地更新视图以显示更改而无需刷新页面.这是我的更新操作:(请注意，我不在这里使用ActiveRecord模型.)

When I add the :remote => true attribute the form successfully submits via AJAX (I can see it happening on the server and I can see the changes when I refresh the page). I want to update the view properly to show the changes without refreshing the page. This is my update action: (Note that I am not working with ActiveRecord Models here.)

def update
  variant = ShopifyAPI::Variant.find(params[:id])
  variant.inventory_quantity = params[:inventory_quantity]
  variant.save
  redirect_to root_path
end

更新 谢谢您帮助我弄清楚答案的答案，事实证明解决方案与他所说的完全一样，但是我遇到了一个小问题.我要更新的视图位于app/views/home/index.html.erb中，而我正在处理以下问题:Variants#update. (变量控制器，更新操作)

UPDATE Thank you to the answer that helped me figure this out turns out the solution is exactly as he said, however I ran into a small problem. The view I wanted to update lives in app/views/home/index.html.erb and I was dealing with this: Variants#update. (Variants controller, update action)

我将我的update.js.html放在与我的视图相同的目录中:app/views/home，而我的服务器抛出500错误:缺少模板.原来，我必须创建一个app/views/variants/目录，并将update.js.html文件放在其中.问题解决了.

I was putting my update.js.html in the same directory that my view was: app/views/home and my server was throwing a 500 error: Missing Template. Turns out, I had to create an app/views/variants/ directory and put the update.js.html file in there. Problem solved.

推荐答案

您需要更改操作以响应JS格式:

You'll need to change your action to respond to the JS format:

def update
  @variant = ShopifyAPI::Variant.find(params[:id])
  @variant.inventory_quantity = params[:inventory_quantity]
  @variant.save

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

然后，您可以使用JavaScript创建update.js.erb文件，该文件将更新页面.假设您有一个_variant.html.erb部分，可以将变体附加到这样的div上(假设您使用的是jQuery):

You can then create an update.js.erb file with JavaScript that will update the page. Let's say you have a _variant.html.erb partial, you could append the variant to a div like this (assuming you are using jQuery):

$('.variant-list').append('<%= escape_javascript(render(:partial => "variant", :object => @variant)) %>');

更新

以下是您如何使用update.js.erb' file (Note: I have not tried this code). Let's say you have the following code in your index.html.erb`的示例:

Here's an example of how you would use the update.js.erb' file (Note: I have not tried this code). Let's say you have the following code in yourindex.html.erb`:

<ul class="variants">
    <li id="101">Variant 1</li>
    <li id="102">Variant 2</li>
    <li id="103">Variant 3</li>
</ul>

您的updated.js.erb可能看起来像这样:

Your updated.js.erb could look something like this:

$('.variants #<%= @variant.id %>').text('<%= @variant.title %>');

这是在列表中找到刚更新的变体，然后将变体标题更改为新的变体标题.

What this does is find the variant you just updated in the list, and change the variant title to the new one.

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