J'ai lu les articles ici, le site Bootstrap et Googled comme un fou - mais je ne trouve pas que je suis sûr que c'est une réponse facile ...
J'ai un modal Bootstrap que j'ouvre à partir d'un assistant link_to comme celui-ci:
<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %>
Dans mon ContactsController.create
action, j'ai du code qui crée Contact
puis passe à create.js.erb
. Dans create.js.erb
, j'ai du code de gestion des erreurs (un mélange de rubis et de javascript). Si tout se passe bien, je veux fermer le modal.
C'est là que j'ai des problèmes. Je n'arrive pas à rejeter le modal quand tout va bien.
J'ai essayé $('#myModal').modal('hide');
et cela n'a aucun effet. J'ai également essayé $('#myModal').hide();
ce qui provoque le rejet du modal mais laisse la toile de fond.
Des conseils sur la façon de fermer le modal et / ou de supprimer le fond de l'intérieur create.js.erb
?
Éditer
Voici le balisage pour myModal:
<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
la source
$('#myModal').modal('hide');
est la syntaxe correcte pour fermer / masquer le modal avec idmyModal
(vous pouvez le tester sur la page de documentation Bootstrap ). Êtes-vous sûr d'avoir un élément avec cet identifiant sur votre page? Aussi, qu'essayez-vous d'accomplir avec cet appel? Votre implémentation actuelle exécute une requête Ajax pournew_contact_path
et en même temps ouvre le modal avec le contenu de#myModal
- est-ce ce que vous voulez?myModal
. J'ai réessayé$('myModal').modal('hide')
et toujours pas bon. HM. En termes de ce que j'essaie d'accomplir, je pense qu'il peut être incorrect d'utiliser l'aide link_to. J'ai remplacé cela par:<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>
puisque je n'ai pas vraiment besoin d'un appel ànew_contact_path
. Je veux juste que le modal s'ouvre, puis traite les entrées utilisateur. Merci de prendre le temps de répondre. Je vais voir si je ne peux pas régler ça.$('#myModal').modal('hide');
(il#
manque un commentaire).$('#myModal').modal('hide')
. J