在Rails 5

时间:2018-01-18 23:58:55

标签: javascript jquery ruby-on-rails ajax

我使用的是Rails 5.1。我在Rails中测试Ajax和Jquery。我关注了RailCast PRO#136 JQuery& Ajax并使用create.js.erb和#create controller在Ajax中成功创建Item。但我有一个问题,如何处理使用Ajax创建操作中的验证错误。当我创建无效项目时,错误无法显示。以下是详细信息:

我在使用chrome进行检查时出现500错误。我相信Ajax错误' xhr'但我不知道在Rails中捕获它。请帮忙!

我的项目名称为:string。

以下是我的文件: 的 _form.html.erb

<%= form_with(model: @item, remote: true, id: :form_item) do |form| %>
<% if @item.errors.any? %>
<div id="error_explanation">
  <h2><%= pluralize(item.errors.count, "error") %> prohibited this item from being saved:</h2>

  <ul>
  <% @item.errors.full_messages.each do |message| %>
    <li><%= message %></li>
  <% end %>
  </ul>
</div>
<% end %>

<div class="field">
<%= form.label :name %>
<%= form.text_field :name, id: :item_name %>
</div>

<div class="actions">
<%= form.submit %>
</div>
<% end %>

index.html.erb:

<p id="notice"><%= notice %></p>
<h1>Items</h1>
<table>
  <thead>
   <tr>
    <th>Name</th>
    <th colspan="3"></th>
   </tr>
</thead>

<tbody id="item_table">
<%= render @items %>
  </tbody>
  </table>
  <br>

  <%= link_to 'New Item', new_item_path, id: 'new_link', remote: true %>

_item.html.erb

<tr>
  <td><%= item.name %></td>
  <td><%= link_to 'Show', item %></td>
  <td><%= link_to 'Edit', edit_item_path(item) %></td>
  <td><%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  <td><%= item.errors.full_messages %></td>
</tr>

create.js.erb:

$('#form_item').remove();
$('#new_link').show();
$('#item_table').append("<%= j render(@item) %>");

new.html.erb

<h1>New Item</h1>

<%= render 'form', item: @item %>

<%= link_to 'Back', items_path %>

new.js.erb

$('#new_link').hide().after("<%= j render(partial: ('form')) %>");

** items_controller.rb

class ItemsController < ApplicationController
 before_action :set_item, only: [:show, :edit, :update, :destroy]

# GET /items
# GET /items.json
def index
  @items = Item.all
end

# GET /items/1
# GET /items/1.json
def show
end

# GET /items/new
def new
  @item = Item.new
end

# GET /items/1/edit
def edit
end

# POST /items
# POST /items.json
def create
  @item = Item.new(item_params)

  respond_to do |format|
    if @item.save
      format.html { redirect_to items_url, notice: 'Item was successfully created.' }
      #format.json { render :show, status: :created, location: @item }
      format.js
    else
      format.html { render :new }
      #format.json { render json: @item.errors, status: :unprocessable_entity }
      format.js
    end
  end
end

# PATCH/PUT /items/1
# PATCH/PUT /items/1.json
def update
  respond_to do |format|
    if @item.update(item_params)
      format.html { redirect_to @item, notice: 'Item was successfully updated.' }
      format.json { render :show, status: :ok, location: @item }
    else
      format.html { render :edit }
      format.json { render json: @item.errors, status: :unprocessable_entity }
    end
  end
end

# DELETE /items/1
# DELETE /items/1.json
def destroy
  @item.destroy
  respond_to do |format|
    format.html { redirect_to items_url, notice: 'Item was successfully destroyed.' }
    format.json { head :no_content }
  end
end

private
  # Use callbacks to share common setup or constraints between actions.
  def set_item
    @item = Item.find(params[:id])
  end

  # Never trust parameters from the scary internet, only allow the white list through.
  def item_params
    params.require(:item).permit(:name)
  end
end

0 个答案:

没有答案