Comment afficher une modale twitter bootstrap via une requête JS dans rails ?

Question

Comment afficher une modale twitter bootstrap via une requête JS dans rails ?

Demandé el 16 de Décembre, 2011: Quand la question a-t-elle été
38640 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux afficher une modale twitter bootstrap en réponse à une requête JS. Ma fonction show.js.erb ressemble à quelque chose comme ceci :

$(document).ready(function() {

    $('#dialog').modal('show')

});

Ici, "dialog" est l'identifiant de la modale. Le code de la modale elle-même ressemble à quelque chose comme ceci :

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">&times;</a>
          <h3> Showing Modal </h3>
    </div>
    <div class="modal-body">
        I need to show up!
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Done</a>
    </div>
</div>

Une chose dont je suis sûr, c'est que le javascript est appelé. Je peux le faire modifier des éléments de la page. Une autre chose est que la modale fonctionne bien. Elle s'affiche parfaitement lorsque j'utilise un bouton HTML pour déclencher la requête, comme ceci :

<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>

Une idée de la raison pour laquelle la modale ne s'affiche pas sur la requête JS ?

Merci !

Demandé el 16 de Décembre, 2011 par Yusuf Saber

Answer 1

5 Réponses

Answer 2

39voto

Pierre Points 4966

J'ai eu un problème similaire, que j'ai résolu avec une légère modification.

Mon div modal est rendu sur la page appelante (à partir d'un partiel) et non par la réponse de la requête JS :

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Loading...</h3>
  </div>
  <div class="modal-body center">
      <%= image_tag "loading.gif" %>
  </div>
  <div class="modal-footer">&nbsp;</div>
</div>

J'utilise ce lien pour m'appuyer sur rails et Twitter JS discret :

<%= link_to negotiation.name, negotiation_path(negotiation), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

et mon show.js.erb ressemble à ceci (raccourci)

$('.modal-body').html('<%= escape_javascript(render :partial => 'negotiationdetail', :object => @negotiation) %>');
$('.modal-header').remove(); // don't need a header here

Cela fonctionne bien et présente l'avantage de montrer une animation de "chargement" à l'utilisateur pendant que la modale est remplie.

Répondu el 23 de Décembre, 2011 par Pierre (4966 Points )

9 votes

Avec Bootstrap2, ce link_to a fonctionné pour moi : <%= link_to @country.name, country_path(@country), {:remote => true, 'data-toggle' => 'modal', 'data-target' => "#modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

Commenté el 24 de Mars, 2012 par Alex

4 votes

Bon travail, messieurs. Petit point : 'data-keyboard' et 'data-backdrop' sont vrais par défaut dans la version 2.0, donc pas vraiment nécessaires à moins que le paramètre = false.

Commenté el 9 de Août, 2012 par CLM

0 votes

Merci beaucoup. Cela a également fonctionné pour moi. Dans rails 3 avec bootstrap 2, link_to peut être écrit comme : <%= link_to negotiation.name, negotiation_path(negotiation), :class => :btn, :data => { :toggle => :modal, :remote => true, :target => "modal-window" } %>

Commenté el 19 de Juillet, 2013 par User089247

Afficher 3 autres commentaires

Answer 3

0voto

Catherine Powell Points 1

Ce code semble devoir fonctionner (je fais quelque chose de similaire où j'affiche la modale lorsque le document est prêt).

Vérifiez que vous chargez le fichier bootstrap-modal.js et assurez-vous qu'il se charge avant votre JS personnalisé. Si votre JS personnalisé est chargé en premier, vous verrez ce comportement.

Répondu el 22 de Décembre, 2011 par Catherine Powell (1 Points )

Answer 4

0voto

Anuja D. Points 152

J'ai rencontré le même problème et il a été résolu comme suit

charger les fichiers jquery (par exemple jquery_171_min.js)
et ensuite charger les js et css moins et
charger le bootstrap-modal.js

essayez avec cette séquence J'espère que cela fonctionnera.

Répondu el 26 de Décembre, 2011 par Anuja D. (152 Points )

Answer 5

0voto

Tabares Points 565

Cet exemple fonctionne très bien.

<body>
    <div id="top"> 
       <a tabindex="-1" href="metadata.html" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
    </div>

    <div id="modal" class="modal hide fade in" style="display:none;">
      <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
      <div class="modal-body"></div>
      <div class="model-footer">footer</div>
    </div>

 <script>

  $(document).ready(function() {
     $('#top').find('a').trigger('click');

    });
 </script>
</body>

Meilleures salutations.

Répondu el 1 de Août, 2013 par Tabares (565 Points )

Answer 6

-5voto

andrewpthorp Points 2514

Je ne connais pas de fonction "modale" de Jquery. On dirait que vous essayez de faire en sorte que l'élément#dialog s'affiche. Vous pourriez simplement le faire :

$("#dialog").show();

Ou est-ce que je passe totalement à côté de la question ?

Répondu el 16 de Décembre, 2011 par andrewpthorp (2514 Points )

1 votes

Merci, mais je ne pense pas que ce soit la bonne réponse. Il peut être utile de consulter la documentation succincte de la modale ici : twitter.github.com/bootstrap/javascript.html

Commenté el 20 de Décembre, 2011 par Yusuf Saber

0 votes

Merci beaucoup jBeans ! Cela a marché pour moi.

Commenté el 9 de Novembre, 2012 par Prasad Korhale

Comment afficher une modale twitter bootstrap via une requête JS dans rails ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment afficher une modale twitter bootstrap via une requête JS dans rails ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: