javascript - Rails 简单的ajax

Question

所以我开始在 ruby​​ on Rails 上学习 ajax，很羞愧地问一些错误，但是这个错误非常烦人，我不明白，这是因为我的操作系统(windows 10)或我的代码

所以我有5个文件，实际上我只是在从脚手架生成后编辑代码

总是报错内部服务器(500)，但是我两天都无法解决，数据仍然插入数据库，但div#data-list不会刷新

代码如下:

1. 我的index.html.erb:

   列出 ajaxxxes

   <table>
     <thead>
       <tr>
         <th>Title</th>
         <th>Description</th>
         <th colspan="3"></th>
       </tr>
     </thead>
     <div id="data-list">
       <%= render 'data' %>
     </div>
   </table>
   
   <br>
   
   
   <%= render 'form' %>
   
   <%= link_to 'New Ajaxxx', new_ajaxxx_path %>
   

2. 我的_data.html.erb:

   <tbody>
     <% @ajaxxxes.each do |ajaxxx| %>
         <tr>
           <td><%= ajaxxx.title %></td>
           <td><%= ajaxxx.description %></td>
           <td><%= link_to 'Show', ajaxxx %></td>
           <td><%= link_to 'Edit', edit_ajaxxx_path(ajaxxx) %></td>
           <td><%= link_to 'Destroy', ajaxxx, method: :delete, data: { confirm: 'Are you sure?' } %></td>
         </tr>
       <% end %>
     </tbody>
   

3. 我的_form.html.erb:

   <%= form_for(@ajaxxx, remote: true) do |f| %>
     <% if @ajaxxx.errors.any? %>
       <div id="error_explanation">
         <h2><%= pluralize(@ajaxxx.errors.count, "error") %> prohibited this ajaxxx from being saved:</h2>
   
         <ul>
         <% @ajaxxx.errors.full_messages.each do |message| %>
           <li><%= message %></li>
         <% end %>
         </ul>
       </div>
     <% end %>
   
     <div class="field">
       <%= f.label :title %><br>
       <%= f.text_field :title %>
     </div>
     <div class="field">
       <%= f.label :description %><br>
       <%= f.text_area :description %>
     </div>
     <div class="actions">
       <%= f.submit %>
     </div>
   <% end %>
   

4. 我的ajaxxxes_controller:

   class AjaxxxesController < ApplicationController
      before_action :set_ajaxxx, only: [:show, :edit, :update, :destroy]
   
     # GET /ajaxxxes
     # GET /ajaxxxes.json
     def index
       @ajaxxxes = Ajaxxx.all
       @ajaxxx = Ajaxxx.new
     end
   
     # GET /ajaxxxes/new
     def new
       @ajaxxx = Ajaxxx.new
     end
   
     # POST /ajaxxxes
     # POST /ajaxxxes.json
     def create
       @ajaxxx = Ajaxxx.new(ajaxxx_params)
   
       respond_to do |format|
         if @ajaxxx.save
           format.html { redirect_to action: "index", notice: 'Ajaxxx was successfully created.' }
           format.json { render :show, status: :created, location: @ajaxxx }
           format.js
         else
           format.html { render :new }
           format.json { render json: @ajaxxx.errors, status: :unprocessable_entity }
         end
       end
     end
   
   
     private
       # Use callbacks to share common setup or constraints between actions.
       def set_ajaxxx
         @ajaxxx = Ajaxxx.find(params[:id])
       end
   
       # Never trust parameters from the scary internet, only allow the white list through.
       def ajaxxx_params
         params.require(:ajaxxx).permit(:title, :description)
       end
   end
   

5. 最后是我的 create.js.erb :

   <% if @ajaxxx.title %>
               console.log("Ajaxxx created!");
               $("#data-list").html("<%= escape_javascript(render 'data') %>");
            <% else %>
               console.log("Failed");
            <% end %>
   

这是日志:

    Started GET "/" for 127.0.0.1 at 2015-11-01 17:06:01 +0700
      [1m[36mActiveRecord::SchemaMigration Load (0.0ms)[0m  [1mSELECT "schema_migrations".* FROM "schema_migrations"[0m
    Processing by AjaxxxesController#index as HTML
      [1m[35mAjaxxx Load (0.0ms)[0m  SELECT "ajaxxxes".* FROM "ajaxxxes"
      Rendered ajaxxxes/_data.html.erb (24.0ms)
      Rendered ajaxxxes/_form.html.erb (60.0ms)
      Rendered ajaxxxes/index.html.erb within layouts/application (160.0ms)
    Completed 200 OK in 468ms (Views: 438.2ms | ActiveRecord: 0.0ms)


    Started GET "/assets/searches.css?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/ajaxxxes.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/indices.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/items.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/searches.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2015-11-01 17:06:02 +0700


    Started POST "/ajaxxxes" for 127.0.0.1 at 2015-11-01 17:06:19 +0700
    Processing by AjaxxxesController#create as JS
      Parameters: {"utf8"=>"✓", "ajaxxx"=>{"title"=>"Test-51", "description"=>"Test-51"}, "commit"=>"Create Ajaxxx"}
      [1m[36m (0.0ms)[0m  [1mbegin transaction[0m
      [1m[35mSQL (0.0ms)[0m  INSERT INTO "ajaxxxes" ("created_at", "description", "title", "updated_at") VALUES (?, ?, ?, ?)  [["created_at", "2015-11-01 10:06:19.915267"], ["description", "Test-51"], ["title", "Test-51"], ["updated_at", "2015-11-01 10:06:19.915267"]]
      [1m[36m (15.6ms)[0m  [1mcommit transaction[0m
      Rendered ajaxxxes/_data.html.erb (62.5ms)
      Rendered ajaxxxes/create.js.erb (109.4ms)
    Completed 500 Internal Server Error in 344ms

    ActionView::Template::Error (undefined method `each' for nil:NilClass):
        1: <tbody>
        2:     <% @ajaxxxes.each do |ajaxxx| %>
        3:       <tr>
        4:         <td><%= ajaxxx.title %></td>
        5:         <td><%= ajaxxx.description %></td>
      app/views/ajaxxxes/_data.html.erb:2:in `_app_views_ajaxxxes__data_html_erb___834628740_45308136'
      app/views/ajaxxxes/create.js.erb:3:in `_app_views_ajaxxxes_create_js_erb___336360114_45416052'
      app/controllers/ajaxxxes_controller.rb:30:in `create'


      Rendered C:/Ruby22/lib/ruby/gems/2.2.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb (0.0ms)
      Rendered C:/Ruby22/lib/ruby/gems/2.2.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templates/rescues/_request_and_response.text.erb (0.0ms)
      Rendered C:/Ruby22/lib/ruby/gems/2.2.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templates/rescues/template_error.text.erb (665.1ms)

Answer 1

错误如下:

 ActionView::Template::Error (undefined method `each' for nil:NilClass):
        1: <tbody>
        2:     <% @ajaxxxes.each do |ajaxxx| %>

问题是你的@ajaxxxes变量未定义。

<小时/>

此错误出现在 app/controllers/ajaxxxes_controller.rb:30:in create (format.js 行，调用 /app/views/ajaxxxes/create.js.erb :

<% if @ajaxxx.title %>
   console.log("Ajaxxx created!");
   $("#data-list").html("<%= escape_javascript(render 'data') %>");
<% else %>
   console.log("Failed");
<% end %>

<小时/>

这里的问题是:<%= escape_javascript(render 'data') %>

app/views/ajaxxxes/_data.html.erb包含对 @ajaxxxes 的引用:

<tbody>
  <% @ajaxxxes.each do |ajaxxx| %>

Rails partials被设计为从应用程序的任何部分调用。因此，您永远不应该引用 @instance它们内部的变量(该变量可能不可用，因为在本例中不可用)。

因此，解决错误的方法是使用 "local" variables ，或省略对 data 的调用来自您的create.js.erb :

#app/views/ajaxxxes/create.js.erb
<% if @ajaxxx.title %>
   console.log("Ajaxxx created!");
   $("#data-list").html("<%=j render 'data', locals: {ajaxxxes: @ajaxxxes} %>");
<% else %>
   console.log("Failed");
<% end %>

#app/controllers/ajaxxxes_controller.rb
class AjaxxxesController < ApplicationController
   def create
      @ajaxxxes = Ajaxxx.all
      ...
   end
end

#app/views/ajaxxxes/_data.html.erb
<tbody>
  <% ajaxxxes.each do |ajaxxx| %>
      <tr>
        <td><%= ajaxxx.title %></td>
        <td><%= ajaxxx.description %></td>
        <td><%= link_to 'Show', ajaxxx %></td>
        <td><%= link_to 'Edit', edit_ajaxxx_path(ajaxxx) %></td>
        <td><%= link_to 'Destroy', ajaxxx, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
</tbody>