2016-03-29 19 views
0

raylarında bir form formunu sunma eylemine nasıl bağlarım? Raylarım uygulamasında AJAX aracılığıyla bir form aralığı sunarım - normal olarak bir model aracılığıyla. Bu hata mesajlarını çeker ve daha sonra form üzerindeki bir hata bloğuna hataları gönderdiğinde render_form_errors işlevi aracılığıyla onları çalıştırırBir Jquery gönderisini, raylar

$(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)); 
    }); 
}); 

: Bunu yapmak için aşağıdaki kodu kullanabilirsiniz. Ben "form_tag" Rails teslim kullanmaya başladıktan daha cazip bir şekilde kod kılmak amacıyla

:

<%= 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 %> 

Bu kodun sonucunu submit_tag şeklinde dahilinde oturmak olmamasıdır üretilen html - form_for yöntemi kullanıldığında yapar. Bu itibarla benim jQuery göndermek eylem bağlanan ve kod değildir:

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

ya Çalışmaz - tüm formu kimlikleri ve sınıfların form_tag kullanarak farklı bir dizi vardır ve çünkü onlar değil Rails tüm formu ürettiklerinde yaptıkları gibi organik olarak bir araya gelirler.

Herkes, bir JQuery yöntemini en yakın form grubunu gönderme sırasında gönder düğmesine tıklatabilir mi, daha sonra bir AjaxError varsa, bu eylemi ona bağlayabilir mi? Yardım etmek için daha fazla bilgiye gereksinim duyarsanız, bana bildirin.

O "hacky" ama Geoffroy yukarıda haberi bağlantı için bu çalışma sayesinde kazanılmış ettik ve sadece doğrudan benim formunu hedefleyerek biraz hissediyor
+1

"remote: true" komutunu kullanacaksınız, bu yüzden olay ujs tarafından işlenir ve atılır. Diğer etkinliklere bağlayabilirsiniz: https://github.com/rails/jquery-ujs/wiki/ajax – Geoffroy

+0

Teşekkürler Geoffroy. Ayrıca form_for sürümünde "remote: true" kullanıyorum ve ekli JQuery, gönderim formuna bağlandığı kadar iyi çalışıyor. Anlamaya çalıştığım şey, form_tag tarafından oluşturulan html'ye nasıl gönderileceğidir. – Zoinks10

cevap

1

: Açıkça doğru seçici ilan

$('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)); 
    }); 
}); 

olay bağlamak . Bu bilgiyi html'den çıkarırsam daha iyi olur - Gelecekte kırılmaya daha az duyarlı olacağını hissediyorum.