Rails 3.1和Twitter Bootstrap模式不好玩吗？ [英] Rails 3.1 and Twitter Bootstrap modal don't play nice?

问题描述

我正在撕掉我的头发：

我正在尝试使用Twitter Bootstrap模式（v.1，而不是2）发表评论通过AJAX，使用div的标准TB模态属性：

I'm trying to use the Twitter Bootstrap modal (v.1, not 2) to post comments via AJAX, using the standard TB modal attributes for the 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，甚至只是为了隐藏模态，更不用说附加评论了：

Clicking the link fires the modal fine, and whether or not I remove the remote => true the post is created fine (one reloads, the other doesn't). But I can't seem to have the create.js.erb action fire ANY javascript, even just to hide the modal, much less append the comment:

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

但是，如果我劫持了点击事件，我可以隐藏模态罚款：

However, if I hijack the click event, I can hide the modal fine:

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

}）;

这当然会破坏通过创建动作传递给js的典型Rails结构。

This, of course, defeats the typical Rails structure of passing through the create action to the js.

有谁能告诉我如何使用Twitter Bootstrap模式通过AJAX发表评论？一个附带条件：评论发布方法需要与模型无关，因为我想在一堆模型上使用代码（多态关联）。

Can anyone show me how to use the Twitter Bootstrap modal to post a comment via AJAX? One proviso: the comment posting methodology needs to be model-independent, since I want to use the code on a bunch of models (polymorphic association).

或者让我们开始吧通过告诉我如何通过控制器动作解雇怪胎的东西....

Or let's just start by showing me how to dismiss the freakin' thing via a controller action....

一如既往，谢谢。

推荐答案

为了有兴趣的人，上述链接对于我弄清楚如何使这项工作至关重要。以下是我的 create.js.erb 文件的最终版本，基于这些解释。特别感兴趣的是绑定到模态，特定于Bootstrap：

For the benefit of those interested, the above links were crucial to me figuring out how to make this work. Following is the final version of my create.js.erb file, based on those explanations. Of particular interest is the binding to the modal, specific to 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 %>

这篇关于Rails 3.1和Twitter Bootstrap模式不好玩吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！