Rails 3.1 and Twitter Bootstrap modal don't play nice?

Question

I'm tearing my hair out over this one:

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>

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

});

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

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....

As always, thanks.

Answer 1

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