Ajax POST Ошибка запроса в Rails

Question

Я пытаюсь реализовать Ajax впервые в простом приложении Rails, помогла в основном этому урок:

Integrating Ajax and Rails

Моего приложение имеет определенное представление шоу, где я хочу для отображения таблицы лидеров, которая отображает список пользователей и их запись, а также форму, в которой могут быть созданы новые пользователи/записи.

Я хотел бы достичь этого через Ajax, но каждый раз, когда я пытаюсь отправить запрос Ajax, я получаю ошибку 500, указывающую на строку ниже JQuery и бросаю сообщение «Не удалось загрузить ресурс».

xhr.send((options.hasContent && options.data) || null); 

Я пытался изменить несколько вещей без успеха, в том числе с использованием дистанционного: истинно в форме и сделать запрос Ajax непосредственно с JQuery. Не могли бы вы указать мне на потенциальную проблему? Ниже соответствующий код:

leaderboards_Controller Show действие оказывает Релевантном LEADERBOARD

def show 
    @leaderboard = Leaderboard.find(params[:id]) 
    @leaders = @leaderboard.leaders 
    @leader = Leader.new(persisted_time: @persisted_time) 
    end 

Leaderboards/show.html.erb

<%= simple_form_for([@leaderboard, @leader], html: { class: 'form-inline', id:'leader-form' }) do |f| %> 
    <%= f.error_notification %> 
    <div class="form-inputs"> 
     <%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %> 
     <%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %> 
     <%= f.button :submit %> 
    </div> 
    <% end %> 

    <ul> 
    <% @leaders.each do |leader| %> 
    <li> 
     <%= leader.name %> | 
     <strong>record: </strong><%= leader.record_time %> <br /> 
    </li> 
    <% end %> 
    </ul> 

leaders_Controller Я намерен отправить запрос Ajax для создания действия в этом контроллере при отправке формы выше

class LeadersController < ApplicationController 
    before_action :set_leader, only: [:show, :edit, :update, :destroy] 
    before_action :set_leaderboard, only: [:create, :new] 

    def index 
    @leaders = Leader.all 
    end 

    def show 
    end 

    def new 
    end 

    def edit 
    end 

    def create 
    @leaderboard = Leaderboard.find(params[:leaderboard_id]) 
    @leader = Leader.new(leader_params) 
    @leader.leaderboard_id = @leaderboard.id 
    respond_to do |format| 
     if @leader.save 
      format.json { render json: @leader, status: :created} 
     else 
      format.json { render json: @leader.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    def update 
    @leader.update_attributes(leader_params) 
    end 

    def destroy 
    @leader.destroy 
    end 

    private 
    def set_leader 
     @leader = Leader.find(params[:id]) 
    end 

    def set_leaderboard 
     @leaderboard = Leaderboard.find(params[:leaderboard_id]) 
    end 

    def leader_params 
     params.require(:leader).permit(:name, :record_time, :leaderboard_id) 
    end 
end 

активы/JavaScripts/leaders.js файл JS, где я делаю запрос Ajax

$(function(){ 
    $("form").submit(function(event){ 
    event.preventDefault(); 

    var action = $(this).attr('action'); 
    var method = $(this).attr('method'); 

    var name = $(this).find('#leader_name').val(); 
    var record_time = $(this).find('#leader_record_time').val(); 

    $.ajax({ 
    method: method, 
    url: action, 
    data: { name: name, record_time: record_time } 
    }); 

    }); 
}); 

и маршруты

resources :leaderboards, shallow: true do 
    resources :leaders 
    end 

Я ясно не получая что-то о Ajax. Буду признателен, если вы укажете меня в правильном направлении.

вот выход я получаю в консоли после завершения заполнения формы

jquery.self-bd7ddd3….js?body=1:10255 POST http://localhost:3000/leaderboards/1/leaders 500 (Internal Server Error) 

это приводит к этой линии в сценарии JQuery:

xhr.send((options.hasContent && options.data) || null); 

и производит:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) 

и журнал сервера

  Started POST "/leaderboards/1/leaders" for ::1 at 2016-11-28 21:42:24 +1100 
Processing by LeadersController#create as JS 
    Parameters: {"utf8"=>"✓", "leader"=>{"name"=>"9089sdas8dds", "persisted_time"=>"5"}, "commit"=>"S", "leaderboard_id"=>"1"} 
    Leaderboard Load (0.5ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    CACHE (0.0ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    (0.2ms) BEGIN 
    Leaderboard Load (0.4ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    SQL (2.6ms) INSERT INTO "leaders" ("name", "persisted_time", "leaderboard_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["name", "9089sdas8dds"], ["persisted_time", "5"], ["leaderboard_id", 1], ["created_at", 2016-11-28 10:42:24 UTC], ["updated_at", 2016-11-28 10:42:24 UTC]] 
    (2.2ms) COMMIT 
Completed 201 Created in 15ms (Views: 0.8ms | ActiveRecord: 5.9ms) 


Started POST "/leaderboards/1/leaders" for ::1 at 2016-11-28 21:42:27 +1100 
Processing by LeadersController#create as JS 
    Parameters: {"utf8"=>"✓", "leader"=>{"name"=>"9089sdas8dds", "persisted_time"=>"5"}, "commit"=>"S", "leaderboard_id"=>"1"} 
    Leaderboard Load (0.5ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    CACHE (0.0ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    (0.7ms) BEGIN 
    Leaderboard Load (0.5ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    SQL (1.9ms) INSERT INTO "leaders" ("name", "persisted_time", "leaderboard_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["name", "9089sdas8dds"], ["persisted_time", "5"], ["leaderboard_id", 1], ["created_at", 2016-11-28 10:42:27 UTC], ["updated_at", 2016-11-28 10:42:27 UTC]] 
    (0.5ms) COMMIT 
Completed 201 Created in 14ms (Views: 1.0ms | ActiveRecord: 4.2ms) 


Started POST "/leaderboards/1/leaders" for ::1 at 2016-11-28 21:42:29 +1100 
Processing by LeadersController#create as JS 
    Parameters: {"utf8"=>"✓", "leader"=>{"name"=>"9089sdas8dds", "persisted_time"=>"5"}, "commit"=>"S", "leaderboard_id"=>"1"} 
    Leaderboard Load (0.6ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    CACHE (0.0ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    (0.2ms) BEGIN 
    Leaderboard Load (0.6ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    SQL (2.3ms) INSERT INTO "leaders" ("name", "persisted_time", "leaderboard_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["name", "9089sdas8dds"], ["persisted_time", "5"], ["leaderboard_id", 1], ["created_at", 2016-11-28 10:42:29 UTC], ["updated_at", 2016-11-28 10:42:29 UTC]] 
    (2.3ms) COMMIT 
Completed 201 Created in 14ms (Views: 0.7ms | ActiveRecord: 6.0ms) 

Answer 1

Пожалуйста, обновите ваш код, как показано ниже.

show.html.erb

<%= simple_form_for([@leaderboard, @leader],remote: true, html: { class: 'form-inline', id:'leader-form' }) do |f| %> 
    <%= f.error_notification %> 
    <div class="form-inputs"> 
     <%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %> 
     <%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %> 
     <%= f.button :submit %> 
    </div> 
    <% end %> 

    <ul> 
    <% @leaders.each do |leader| %> 
    <li> 
     <%= leader.name %> | 
     <strong>record: </strong><%= leader.record_time %> <br /> 
    </li> 
    <% end %> 
    </ul> 

leaders_Controller

def create 
    @leaderboard = Leaderboard.find(params[:leaderboard_id]) 
    @leader = Leader.new(leader_params) 
    @leader.leaderboard_id = @leaderboard.id 
    respond_to do |format| 
    if @leader.save 
     format.json { render json: @leader, status: :created} 
    else 
     format.json { render json: @leader.errors, status: :unprocessable_entity } 
    end 
    end 
    end 

активы/JavaScripts/leaders.js

$(function(){  
return $("#your-form-id").on("ajax:success", function(e, data, status, xhr) { 
      e.preventDefault(); 
      // success code 
     }).on("ajax:error", function(e, xhr, status, error) { 
      // error code 
     }); 
}); 

Answer 2

попробуйте добавить

respond_to(:js) 

в конце вашего метода создания.

И да, пожалуйста, просто используйте remote: true