web-dev-qa-db-fra.com

Comment afficher le mode de démarrage de Twitter via une requête JS dans des rails

Je souhaite afficher un modal d'amorçage Twitter en réponse à une demande JS. Ma fonction show.js.erb ressemble à ceci:

$(document).ready(function() {

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

});

Ici "dialogue" est l'identifiant du modal. Le code modal lui-même ressemble à 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 les éléments de la page. Une autre chose est que modal fonctionne bien. Il se présente très bien lorsque j'utilise un bouton HTML pour déclencher la requête de la manière suivante:

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

Aucune idée pourquoi le modal n'apparaît pas sur la demande de JS? 

Je vous remercie!

javascriptruby-on-railsmodal-dialog
31
Yusuf Saber

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

Mon div modal est rendu sur la page d'appel (à partir d'un partiel) et non par la réponse de la demande 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 faire confiance à 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 le remplissage du modal.

38
Pierre

J'ai eu ce problème et je l'ai corrigé en changeant le rendu javascript en:

$("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
$("#modal-window").modal();

And the modal window to: 
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

Vous pouvez consulter des explications plus détaillées ici https://kolosek.com/Rails-creating-modals

1
Nesha Zoric

J'ai fait face au même problème et il a été résolu comme 

  1. charger les fichiers jquery (par exemple jquery_171_min.js)
  2. puis chargez le moins de js et de css et 
  3. charger le fichier bootstrap-modal.js

essayez avec cette séquence .. J'espère que ça marche.

0
Anuja Patil

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.

0
Tabares

Ce code semble fonctionner normalement (je fais quelque chose de similaire quand je montre le modal sur le document prêt).

Vérifiez que vous chargez le fichier bootstrap-modal.js et assurez-vous qu'il se charge avant le chargement de votre JS personnalisé. Si votre JS personnalisé se charge en premier, vous verrez ce problème.

0
Catherine Powell

J'ai eu ce problème,

la cause pour moi était de placer le modal entièrement dans un fichier partiel et de mettre le déclencheur (bouton/lien) appelant le modal depuis un autre fichier de vue.

Supposons donc que le bouton de déclenchement se trouve dans ma page d'affichage d'index et que je construise le modal dans le fichier _form.html.erb; Et je veux créer un nouvel enregistrement à partir de la page d'index en utilisant ce modal.

Solution:

  • créer la div la plus externe qui a le "id" dans le même fichier que le déclencheur

index.html.erb - bouton de déclenchement 

<h3>
  <%= link_to 'Add Category',
    new_todo_path,
    remote: true,
    class: "btn btn-lg btn-success",
    data: {toggle: "modal", target: "#modal_form_category"} 
  %>
</h3>

index.html.erb - le plus à l'extérieur du modal  

<div id="modal_form_category" class="modal fade" role="dialog">
</div>

new.js.erb

$(document).ready(function() {
  $("#modal_form_category").html("<%= j render "form" %>");
});

P.S: excusez le new.js.erb Je n’ai aucune raison absolue d’enfermer le code tant que la page n’est pas prête. Je suppose que cela fonctionnera même sans la fonction Ready; Si vous savez si c'est nécessaire ou non, merci de me le dire.

0
Rajan