我正在通过创建一个简单的应用程序来管理 product 作为 datatable 来学习Rails中的Ajax。直到 update 为止,一切( 新建,创建,编辑 )都做得很好。 单击 更新表单 中的“提交”按钮时,我什么也没做。 这是我的终端日志
Started GET "/products/3/edit" for ::1 at 2019-05-01 01:14:47 +0700
Processing by ProductsController#edit as JS
Parameters: {"id"=>"3"}
Product Load (0.4ms) SELECT "products".* FROM "products" WHERE "products"."id" = ? LIMIT ? [["id", 3], ["LIMIT", 1]]
↳ app/controllers/products_controller.rb:68
Rendering products/edit.js.erb
Rendered products/_editform.html.erb (1.8ms)
Rendered products/edit.js.erb (14.1ms)
Completed 200 OK in 54ms (Views: 31.9ms | ActiveRecord: 0.4ms)
products_controller.rb
def update
respond_to do |format|
if @product.update(product_params)
format.html { redirect_to @product, notice: 'Product was successfully updated.' }
format.json { render :show, status: :ok, location: @product }
format.js
else
format.html { render :edit }
format.json { render json: @product.errors, status: :unprocessable_entity }
end
end
end
_product.html.erb
<tr>
<td colspan="3"> <%= product.id %></td>
<td colspan="3"> <%= product.name %></td>
<td><%= link_to 'Show', product %></td>
<td><%= link_to 'Edit', edit_product_path(product), remote:true, class:'edit-btn' %></td>
<td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
_editform.html.erb
<%= form_for @product do |f| %>
<tr>
<td colspan="3"><%= product.id %></td>
<td colspan="3"><%= f.text_field :name %></td>
<td><%= f.submit "Save", class: 'save-btn' %></td>
<td></td>
<td></td>
</tr>
<% end %>
edit.js.erb
$('.edit-btn').bind('ajax:success', function() {
$(this).closest('tr').html('<%= j render 'editform', product: @product %>');
});
update.js.erb
$('.save-btn').bind('ajax:success', function() {
$(this).closest('tr').html('<%= j render 'product', product: @product %>');
});
我认为 update.js.erb 有问题。因为当我添加console.log('hello');
位于顶部的 更新 和 edit ,但只有 edit 工作。
并且network
仅显示edit -> status 200
。
谢谢你的帮助
答案 0 :(得分:0)
已更新:我发现了错误。在我的_editform.html.erb
中,<tr>
内的Rails表单无法完全呈现html。 </form>
不要包装text_field
和submit
按钮。这就是为什么提交按钮不执行任何操作的原因。