Rails 3.1 et Twitter Bootstrap modal ne joue pas bien?

Question

Je suis déchirer mes cheveux sur celui-ci:

Je suis en train d'utiliser le Twitter Bootstrap modal (v.1, pas 2) pour poster des commentaires via AJAX, en utilisant les attributs standard modal TB pour la 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> 

En cliquant sur le lien déclenche le bien modal, et si je retire la remote => true le poste est créé fin (un rechargements, l'autre ne fonctionne pas). Mais je ne peux pas sembler avoir beaucoup moins javascript TOUT feu d'action create.js.erb, même juste pour cacher le modal, ajoutez le commentaire:

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

Cependant, si je Hijack l'événement click, je peux cacher l'amende modale :

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

}); Ceci, bien sûr, détruit la structure typique de Rails qui consiste à passer par l'action create au js. Est-ce que quelqu'un peut me montrer comment utiliser le modal Twitter Bootstrap pour poster un commentaire via AJAX? Une condition: la méthodologie de publication des commentaires doit être indépendante du modèle, puisque je veux utiliser le code sur un tas de modèles (association polymorphique).

Ou nous allons juste commencer à en me montrant comment rejeter la chose connerie par une action de contrôleur ....

Comme toujours, merci.

Answer 1

Pour les personnes intéressées, les liens ci-dessus ont été cruciaux pour moi de trouver comment faire ce travail. Voici la version finale de mon fichier create.js.erb, basée sur ces explications. Il est particulièrement intéressant la liaison au modal, spécifique à 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 %>