2017-06-13 130 views
1

我有一個form_with,它調用一個以JSON響應的控制器。我想在事件ajax:successajax:error期間運行javascript(處理錯誤,...)。Rails 5:Ajax變量undefined在ajax上:錯誤/ ajax:成功事件

我遵循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) 

謝謝。 :)

+0

爲什麼你的url形式是'contact_path'?你想要'message_path'還是不想? – inye

+0

噢謝謝你。我忘了重命名我的路線。但我的控制器是電話。這不是擔心。 –

+0

你在控制檯中得到了什麼? – inye

回答

1

如果您使用的是軌道-UJS適配器,根據本Rails Edge Guide

調用UJS的事件處理程序的簽名已經改變。與jQuery的 版本不同,所有自定義事件只返回一個參數: 事件。在此參數中,還有一個附加屬性詳細信息 ,其中包含一個額外參數數組。

我建議看看你的app/assets/javascripts/application.js並找出你目前使用哪個ujs適配器。 //= require rails-ujs是新的默認值。

查看指南中提供的示例。您可以按照以下方式提取datastatusxhr

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

另一種方法是使用jquery_ujs這是默認到Rails 5.1之前,有一個簽名更喜歡你正期待。