2016-03-29 1 views
0

В моем приложении rails я представляю диапазон форм через AJAX - обычно через модальный. Для того, чтобы сделать это, я использую следующий код:Как связать Jquery submit с формой представления формы form в rails

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

Это вытягивает сообщения об ошибках и запускает их через функцию render_form_errors которая затем сообщения ошибки в блоке ошибки на форме.

Для того, чтобы сделать код более привлекательным способом я начал использовать «form_tag» представления в Rails:

<%= 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 и они не делают органично сочетаются, как и в случае, когда Rails создает всю форму.

Может ли кто-нибудь предложить метод Jquery, чтобы захватить ближайшую группу форм к кнопке submit на submit, а затем привязать это действие к ней, если есть AjaxError?

Дайте мне знать, если вам нужна дополнительная информация, чтобы помочь.

+1

Вы используете «remote: true», поэтому событие обрабатывается и отбрасывается ujs. Вы можете привязываться к другим событиям: https://github.com/rails/jquery-ujs/wiki/ajax – Geoffroy

+0

Спасибо, Джеффрой. Я также использую «remote: true» в версии form_for, а подключенный JQuery работает с этим достаточно хорошо, поскольку он привязывается к форме на submit. Я пытаюсь понять, как связать с html, сгенерированным form_tag на submit. – Zoinks10

ответ

1

Он чувствует себя немного «Hacky», но я получил это работу благодаря ссылке Жоффруа публикуемой выше и только непосредственно нацеливание моей формы:

$('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 - я чувствую, что это будет менее восприимчиво к взлому в будущем.