Модальное окно Bootstrap не закрывается после отправки формы в Rails

У меня проблемы с модальным загрузочным окном в моем приложении Rails 3. В настоящее время он обрабатывает форму обзора, которая отправляет и обновляет БД, но модальное окно не закрывается при отправке формы. Я пробовал добавить это к кнопке отправки формы:

:data => {:dismiss => "modal"}

Но он закрывает модальное окно без выполнения действия обновления. Вот мой модальный код в его нынешнем виде:

<!-- Review Modal -->
<% if current_user == nil %>
<% else %>
<div id="reviewModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="reviewModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="reviewModalLabel">Write a review</h3>
  </div>
  <div class="modal-body">
  <%= form_for(review_ballot, :remote => true, :html => {:class => 'review_ballot'}) do |f| %>
    <h4>Your score:</h4>
    <%= f.label("score_1", content_tag(:span, '1'), {:class=>"review", :id=>"1"}) %>
    <%= radio_button_tag("review[score]", 1, current_user_review == 1, :class => 'review_button')%>
    <%= f.label("score_2", content_tag(:span, '2'), {:class=>"review", :id=>"2"}) %>
    <%= radio_button_tag("review[score]", 2, current_user_review == 2, :class => 'review_button')%>
    <%= f.label("score_3", content_tag(:span, '3'), {:class=>"review", :id=>"3"}) %>
    <%= radio_button_tag("review[score]", 3, current_user_review == 3, :class => 'review_button')%>
    <%= f.label("score_4", content_tag(:span, '4'), {:class=>"review", :id=>"4"}) %>
    <%= radio_button_tag("review[score]", 4, current_user_review == 4, :class => 'review_button')%>
    <%= f.label("score_5", content_tag(:span, '5'), {:class=>"review", :id=>"5"}) %>
    <%= radio_button_tag("review[score]", 5, current_user_review == 5, :class => 'review_button')%>
  <br />
    <h4>What'd you think?</h4>
  <%= f.text_area :review_text, :rows => 3, :cols => 10 %>
  <%= hidden_field_tag :venue_id, @venue.id %>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <%= submit_tag "Save review", :class => "btn btn-warning" %>
    <% end %>
  </div>
</div>

А вот помощник по месту проведения для метода review_ballot.

module VenuesHelper
  def review_ballot
    if @review = current_user.reviews.find_by_venue_id(params[:id])
      @review
    else
      current_user.reviews.new
    end
  end

  def current_user_review
    if @review = current_user.reviews.find_by_venue_id(params[:id])
      @review.score
    else
      "N/A"
    end
  end
end

Я не понимаю, что теперь попробовать. Я погуглил, и мне не повезло. Как это исправить?

Изменить: Мое временное решение - я удалил :remote => true из модального окна и перенаправил посетителя в действие контроллера, поэтому теперь мне не нужно беспокоиться о его увольнении.

Это явно неуклюже / хакерски, поэтому мне все равно было бы приятно, если бы кто-нибудь помог мне решить эту проблему. Готовы предоставить больше кода / информации по запросу.


person mitchmonsen    schedule 08.12.2012    source источник
comment
вы пробовали добавить data-dismiss="modal" к кнопке отправки? С другой стороны, я обычно использую модальные окна для вызовов ajax, и я обычно закрываю их с помощью обратного вызова JS при завершении ajax - таким образом вы можете добавить изображение загрузчика в модальное окно во время обработки действия и аккуратно обрабатывать ошибки (замените модальное тело и т. д.)   -  person m_x    schedule 09.12.2012
comment
Да, я добавил отклонение данных, но это закрывает модальное окно до того, как форма сможет отправить, поэтому она не отображается в БД.   -  person mitchmonsen    schedule 11.12.2012
comment
Я пробовал использовать функцию, похожую на эту: $('#reviewModal').on('ajax:complete',function(){$('#reviewModal').modal('hide');}); Безуспешно ...   -  person mitchmonsen    schedule 12.12.2012
comment
странно, это то, что я обычно делаю, и это работает. где разместить этот скрипт?   -  person m_x    schedule 13.12.2012
comment
Он находится в файле venues.js. У меня есть предложение content_for :scripts в верхней части этого конкретного представления, которое ссылается на него.   -  person mitchmonsen    schedule 14.12.2012
comment
на всякий случай, завернули ли вы свой скрипт в $(document).ready?   -  person m_x    schedule 14.12.2012
comment
Вот полный код: $(document).ready( $('#reviewModal').on('ajax:complete',function(){$('#reviewModal').modal('hide'); }) );   -  person mitchmonsen    schedule 15.12.2012
comment
мой обычный js выглядит так: $(document).ready( $('#your_form_id').bind('ajax:complete',function(){$('#reviewModal').modal('hide'); }) );. Обратите внимание, что я нацелен на форму и использую bind вместо on. Надеюсь, это поможет...   -  person m_x    schedule 17.12.2012


Ответы (2)


В Вашем случае я имею в виду, что Вы не загружаете изображения. Таким образом, вы можете просто перейти к вызову ajax для отправки. Вот простой код

$(document).ready(function(){

  $('#submit_button_id').click(function() {  
    var valuesToSubmit = $("#form_id").serialize();
    $("#modal_id").modal('hide') ;

    $.ajax({
      url: "/controller/method",
      data: valuesToSubmit,
      type: "POST/GET/PUT"
      }).success(function(data, status){
        $("#id_if_div_where_you_want_to_show_updated_data").html( data );
    });

    return false; 
  });
});

Отредактировано

Метод контроллера выглядит следующим образом

def method
  Do what you want to do
  @object = Model.some_queries
  render :template => "path_to_view_file like controller_name/method_name", :layout => false
end
person Jyothu    schedule 28.12.2012
comment
как только я исправлю свой контроллер, чтобы он принимал вызовы ajax с respond_to do |format| format.json..., как мне обновить свое представление? С create.js.erb файлом? Я не могу заставить это работать. Спасибо, Джиоту - person Brian; 04.07.2013
comment
@Brian: Это не отправка с использованием remote = ›true. Для этой цели мы используем только ajax. См. Часть редактирования моего ответа. Это может вам помочь. - person Jyothu; 04.07.2013
comment
как мне настроить маршрут для этого метода, например: match 'users/update_dom', :to => "users#update_dom"? - person Brian; 04.07.2013
comment
Можете ли вы взглянуть на вопрос, который я только что разместил? stackoverflow.com/questions/17462138/ Я пытаюсь сделать это с помощью метода контроллера users#create. - person Brian; 04.07.2013
comment
@ Брайан: в вашем routes.rb ДЕЛАЙТЕ одно. ресурсы: пользователи действительно участник ставят: update_dom end end - person Jyothu; 04.07.2013

Я решил эту проблему, привязав submit к событию hidden.bs.modal:

$('#modal_id').on('hidden.bs.modal', function() {
    $('form').submit();
    form_submitted = false;
});

Чтобы предотвратить отправку формы при нажатии кнопки, вы можете использовать return false; в событии onclick формы:

<%= submit_tag 'Save review',
               class: 'btn btn-warning',
               :data => { :dismiss => 'modal' },
               :onclick => "form_submitted = true; return false;" %>

Изменить:

Добавлен form_submitted = true в событие onclick, поэтому вы знаете, что модальное окно закрывается при отправке, а не любое другое условие выхода. Сбросьте на false после вызова $('form').submit(). Добавьте эту переменную в свой файл javascript, изначально false.

person eric gray    schedule 20.02.2014