2016-03-29 9 views
0

私のレールアプリでは、AJAXを介してさまざまなフォームを提出しています。これは、すべてのエラーメッセージをプルして、フォーム上のエラーブロックにエラーをポストrender_form_errors機能を介してそれらを実行しますjqueryをform_tagに提出するにはどうすればいいですか?

$(document).ready(function(){ 
    $(form).on('submit', function(event) { 
    form = $(this).attr('id'); 
    selector = $('form#' + form) 
    $(document).bind('ajaxError', selector, function(event, jqxhr, settings, exception){ 
    // note: jqxhr.responseJSON undefined, parsing responseText instead 
    $(event.data).render_form_errors($.parseJSON(jqxhr.responseText)); 
    }); 
}); 

:そうするためには、私は次のコードを使用します。コードをレンダリングするために

私はRailsの中に「form_tag」の提出を使用し始めました、より魅力的な方法で:

<%= form_tag('/sale_qualifiers', method: :post, remote: true) do -%> 
    <%= fields_for :sale_qualifier do |ff| %> 
    <%= ff.hidden_field :sales_opportunity_id, :value => @sales_opportunity.id %> 
     <%= ff.hidden_field :question_id, :value => @question.id %> 
      <tr id="form#sale_qualifier_submit"> 
      <td><%= @question.question_text %></td> 
     <td> 
     <%= ff.fields_for :answer_attributes do |answer| %> 
      <div class="form-group"> 
      <% if @question.answer_type == 'Text Field' %> 
       <%= answer.text_area :answer_text, :placeholder => "Enter your answer"%> 
      <% end %> 
      <% if @question.answer_type == 'Datetime' %> 
       <div class='input-group date' id='datetimepicker' data-date-format="YY.MM.DD"> 
       <%= answer.text_field :answer_text, class: "form-control", data: { date_format: 'YYYY/MM/DD' }, :placeholder => "YYYY/MM/DD" %> 
       <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     <% end %> 
     <% if @question.answer_type == 'Boolean' %> 
      <%= answer.select :answer_text, [['Yes', true], ['No', false]] %> 
     <% end %> 
      <span class="warning-block"></span> 
      <span class="help-block"></span> 
      </div> 
     <% end %> 
      </td> 
      <td> 
       <%= submit_tag "Submit", class: "btn btn-large btn-success", id: "sale_qualifier_submit", data: { disable_with: "Submitting..." }, autocomplete: 'off' %> 
      </td> 
     </tr> 
    <% end %>  
<% end %> 

このコードの結果はsubmit_tagがでフォーム内で座っていないということです生成されたhtml - form_forメソッドが使用されたときに実行されます。そのような私のjQueryが送信アクション、およびコードに結合しないよう:

$(form).on('submit', function(event) { 
    form = $(this).attr('id'); 
    selector = $('form#' + form) 

はどちらか動作しません - form_tagを使用した場合、全体の形は、IDSとクラスの異なるセットを持っており、彼らはそうではないので、 Railsがフォーム全体を生成するときと同じように、有機的にまとまります。

提出時に送信ボタンに最も近いフォームグループを取得し、AjaxErrorがある場合はこのアクションをバインドするためのJqueryメソッドを提案できますか?

さらに詳しい情報が必要な場合はお知らせください。

+1

"remote:true"を使用しているため、イベントはujsによって処理されて破棄されます。あなたは他のイベントにバインドすることができます:https://github.com/rails/jquery-ujs/wiki/ajax – Geoffroy

+0

ありがとうGeoffroy。また、form_forバージョンでは "remote:true"を使用しています。添付されたJQueryは、送信時にフォームにバインドするだけで十分です。私が理解しようとしているのは、送信時にform_tagによって生成されたhtmlにバインドする方法です。 – Zoinks10

答えて

1

それは少し「ハック」感じているが、私はジョフロワは上記とちょうど直接私のフォームを標的にすることにより、投稿のリンクには、この作業のおかげを得ている:

$('form').on('submit', function(event) { 
$(document).bind('ajaxError', 'form#new_sale_qualifier', function(event, jqxhr, settings, exception){ 
    // note: jqxhr.responseJSON undefined, parsing responseText instead 
    $(event.data).render_form_errors($.parseJSON(jqxhr.responseText)); 
    }); 
}); 

は、明示的にイベントをバインドするために正しい選択を宣言する。私はhtmlからこの情報を抽出することができればより良いでしょう - 私はそれが将来的に壊れることに敏感ではないと感じます。

関連する問題