Rails 3.1 и Twitter Bootstrap модальные не играют хорошо? - PullRequest
Новая
       11

Rails 3.1 и Twitter Bootstrap модальные не играют хорошо?

2 голосов
/ 20 марта 2012

Я рву волосы над этим:

Я пытаюсь использовать модал Twitter Bootstrap (v.1, а не 2) для публикации комментариев через AJAX, используя стандартные модальные атрибуты TB для div: 

<div class="modal hide fade" id="commentModal">
<div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Say Something</h3>
</div>
<div class="modal-body">
    <%= render 'common/error_messages', :target => @comment %>
    <%= form_for [@commentable, Comment.new], :remote => true do |f| %>
      <%= f.hidden_field :user_id, :value => current_user.id %>
      <%= f.text_area :content, :size => "84x5" %>
</div>
<div class="modal-footer">
    <%= f.submit "Comment", :class => "btn primary",:id => "submitButton" %>
</div>
    <% end %></div>

При нажатии на ссылку запускается модальный штраф, и независимо от того, удаляю я или нет remote => true сообщение, создается штраф (один перезагружается, другой - нет). Но мне кажется, что у меня не может быть create.js.erb действия, запускающего ЛЮБОЙ javascript, даже просто чтобы скрыть модал, а тем более добавить комментарий: 

$('#commentModal').modal('hide');

Однако, если я перехватываю событие click, я могу скрыть модальный штраф: 

$(document).ready(function() {
$('#submitButton').click(function(){
    $('#commentModal').modal('hide');
    return false;
});

});

Это, конечно, побеждает типичную структуру Rails прохождения действия create в js.

Может кто-нибудь показать мне, как использовать модал Twitter Bootstrap, чтобы оставлять комментарии через AJAX? Одно условие: методология публикации комментариев должна быть независимой от модели, поскольку я хочу использовать код на множестве моделей (полиморфная ассоциация).

Или давайте просто начнем с того, что покажем мне, как отклонить чертову вещь с помощью действия контроллера ...

Как всегда, спасибо.

1 Ответ

1 голос
/ 22 марта 2012

Для блага тех, кто заинтересован, приведенные выше ссылки имели решающее значение для меня, чтобы выяснить, как сделать эту работу.Ниже приводится окончательная версия моего create.js.erb файла, основанная на этих объяснениях.Особый интерес представляет привязка к модалу, специфичная для Bootstrap: 

var el = $('#new-comment-form');

<% if @comment.errors.any? %>

  // Create a list of errors
  var errors = $('<ul />');

  <% @comment.errors.full_messages.each do |error| %>
    errors.append('<li><%= escape_javascript( error ) %></li>');
  <% end %>

  // Display errors on form
  el.find('.modalerrors').html(errors).slideDown();
  el.find('.modalerrors').delay(5000).slideUp();


<% else %>


$('#commentModal').modal('hide');

// Clear form
el.find('input:text,textarea').val('');
el.find('.modalerrors').empty();

// Render a partial to display the comment here-- "prepend" if you want the most recent first, "append" if you want it last
// You must hide the rendered comment before prepending to show it with an effect
// Bind the show effects to when the modal is 'hidden' -- Use 'one' to avoid duplication if someone makes multiple comments before reloading

  $('#commentModal').one('hidden', function () {
     $('<%= escape_javascript(render( @comment )) %>').hide().prependTo('#comments').show('drop',{}, 500, function() {
        $(this).effect("highlight",{color:"#C3FFB5"}, 2000);          
     });
  });

<% end %>
...