Rails 5：ajaxでエラーunavfinied：エラー/ ajax：成功イベント

Question

form_with私はJSONで応答するコントロールを呼び出すことがあります。イベント中にjavascript（エラー処理など）を実行したいです。ajax:successまたはajax:error。

私はRailsのドキュメントに従いました。残念ながら、私のイベントの変数はundefiniedです。 eのみが設定されます。

フォーム：

<%= form_with url: contact_path, scope: 'message', id: 'new_message' do |f| %> 
    <div class="row"> 
     <div class="input-field col s6"> 
     <%= f.text_field :name, class: 'validate' %> 
     <%= f.label :name, 'Nom' %> 
     </div> 
     <div class="input-field col s6"> 
     <%= f.email_field :email, class: 'validate' %> 
     <%= f.label :email, 'Email' %> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s6"> 
     <%= f.telephone_field :phone, class: 'validate' %> 
     <%= f.label :phone, 'Téléphone' %> 
     </div> 
     <div class="input-field col s6"> 
     <%= f.text_field :website, class: 'validate' %> 
     <%= f.label :website, 'Site Web' %> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s12"> 
     <%= f.text_area :content, class: 'materialize-textarea validate' %> 
     <%= f.label :content, 'Message' %> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col s6"> 
     <%= recaptcha_tags %> 
     </div> 
     <div class="col s6"> 
     <%= button_tag class: 'btn primary waves-effect waves-light right' do %> 
      Envoyer 
      <i class="material-icons right">send</i> 
     <% end %> 
     </div> 
    </div> 
<% end %> 

コントローラー：

def create 
    @message = Message.new(message_params) 

    respond_to do |format| 
     if verify_recaptcha(model: @message) && @message.valid? 
     MessageMailer.new_message(@message).deliver 
     format.json { render json: @message, status: :created } 
     else 
     format.json { render json: @message.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

のCoffeeScript：

$(document).ready -> 
    $("#new_message").on("ajax:success", (e, data, status, xhr) -> 
    console.log(xhr); 
).on "ajax:error", (e, xhr, status, error) -> 
    console.log(xhr); 

結果：

undefined message.self-5eda06948d26dade035273a7f168828c2cb1852e26937c49f50da7ca2532ad72.js:4:14 


Started POST "/contact" for 127.0.0.1 at 2017-06-13 17:19:17 +0200 
Processing by MessagesController#create as JS 
    Parameters: {"utf8"=>"✓", "authenticity_token"=>"aBxh+eJedXw0WifdUXFAlgH0gWxNpiDQa2J3hdJayC/wBaccIxNSVK4pycYwu9XMb1s2/r9S8+FteRFoocdrZQ==", "messages"=>{"name"=>"", "email"=>"", "phone"=>"", "website"=>"", "content"=>""}, "g-recaptcha-response"=>"03AOPBWq9SEfWUxzdyMRMdd0p65vonbGjNjA_mhCA07vfoXyA6_nEVn220Ot5HU90_KpQv6ziii0VCoa1hZosUcsARL7DuJbFHA2kt_NBHvnURmPpKR0SMq0OfulzJokvobdu9t1z33Uby3oTAtTgEAEmxX6yDc_yuwmqHXAjh5SL0bhAyD6AF2wAN8me7fMKMULu_DS5KtLgwJjK8B2TmvGydn0neHDWcfSbDKP7WRP-RQQePc9hDcOCbUFoVrW2kfpg3p4OV-hWiV4q6-HBRZK3A1mcj5rJZd_zBe3v-yx6LHAXB2Bsb9Uc", "button"=>""} 
Completed 422 Unprocessable Entity in 2701ms (Views: 0.5ms | ActiveRecord: 856.3ms) 

ありがとうございます。 :)

Answer 1

をあなたはこのRails Edge Guideによると、レール-UJSアダプタを使用している場合：UJSのイベントハンドラへの呼び出しの

署名が変更されました。 jQueryの バージョンとは異なり、すべてのカスタムイベントは1つのパラメータ、つまり イベントのみを返します。このパラメータには、余分なパラメータの配列を含む追加の属性の詳細 があります。

あなたのapp/assets/javascripts/application.jsを見て、あなたが現在使っているujsアダプターを見つけることをお勧めします。 //= require rails-ujsが新しいデフォルトです。

ガイドに記載されている例を参照してください。次のようにしてdata,status、およびxhrを抽出することができます。

document.body.addEventListener('ajax:success', function(event) { 
    var detail = event.detail; 
    var data = detail[0], status = detail[1], xhr = detail[2]; 
}) 

別の方法としては、5.1をレールに前にデフォルトだったとあなたが期待していた以上のような署名を持っているjquery_ujsを使用することです。