Comment ajouter modal bootstrap avec link_to le lien contenu ouvert en modal ?

Je suis en train d'utiliser bootstrap modal http://twitter.github.com/bootstrap/javascript.html#modals sur les rails lien pour ouvrir le lien dans la modale 

<%= link_to page_path, target: '_blank' %>

mais de toute façon ça ne fonctionne pas. Le cardan standard code est - 

<a data-toggle="modal" href="#myModal" class="btn">Launch demo modal</a>

mais je ne suis pas sûr de la façon de l'appliquer à link_to dans les rails de, toute aide ?

Grâce

  • J'ai fait ce travail en ajoutant des exigences de mon application.js dans cet ordre: //= besoin de popper, //= nécessitent turbolinks, //= besoin de bootstrap, Vous pouvez consulter l'exemple ici: kolosek.com/rails-creating-modals
InformationsquelleAutor iCyborg | 2013-03-01
  1. 38

    Ci-dessous est le code si vous voulez précharger le modal sur la page de l'état caché

    <%= link_to "Open modal", "#my-modal", :class => "btn", "data-toggle" => "modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Modal Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

    Et si vous voulez charger le modal grâce à ajax, alors vous pouvez faire quelque chose comme ceci

    <%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "my-modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">New Post</h3>
  </div>
  <div class="modal-body a-unique-class">
    New Post Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

    Dans posts/new.js.erb vous

    $(".a-unique-class").html('<%= j render "posts/_form" %>')

    Assurez-vous que vous avez un unique id ou une classe pour chaque modal corps.

    En supposant que vous souhaitez créer un nouveau message en utilisant le formulaire modal, le code du contrôleur et _form.html.erb est en place

    • Grâce benchwarmer, même si cela n'a pas fonctionné. Voici mon code <%= link_to "Ouvrir modal", page_path, :classe => "btn", "data-toggle" => "modal" %> mais il a encore l'ouverture de la page dans un nouvel onglet
    • Vous souhaitez précharger le modal sur la même page ou si vous voulez avoir modale du corps chargé via ajax?
    • Je suis bien avec rien, faire noter que sur cette page, il peut y avoir 5-6 ces encres donc je ne suis pas sûr d'avoir 5-6 modals préchargé est une bonne idée
    • Je sais que ce post est vieux, mais juste une petite sintax correction dans le code: $(".un-unique-classe").html('<%= j rendu "posts/_form" %> ')
    • pourquoi est-ce que cela charge la chaîne de caractères " <%= j rendu "posts/_form" %> " dans le modal corps pour moi? Est-il un paramètre de configuration, je suis absent pour laisser javascript à travers?
    • Ahh, parce que je met le le articles/nouvelles.js.erb fichier dans les actifs/javascripts dossier. Je me suis déplacé à la vue de dossier et il fonctionne comme un charme.
    • Salut les gars, je ne suis pas vraiment sûr de savoir où est la file.js.erbsitué. Quelqu'un peut-il me dire? Ou j'ai besoin de créer ce fichier? Note: mon rails de la version 4.2.6
    • Vous devez créer dans votre views/posts dossier
    • Ne devrait-elle pas être: <%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "#my-modal" %> de sorte que le data-target est un identifiant unique? Cependant, cette solution ne semble pas fonctionner pour bootstrap3. Vous devez utiliser le code html dans les exemples ici: getbootstrap.com/javascript/#modals
    • Et dans le posts/new.js.erb il devrait être $(".a-unique-class").html('<%= j render "form" %>'). Ensuite, tout fonctionne :).

    InformationsquelleAutor benchwarmer
  2. 18

    Il y a une belle façon d'ajouter de la data attributs dans les Rails. Vous pouvez faire quelque chose de ce genre pour obtenir les mêmes résultats.

    <%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} %>
    • Quelle est la meilleure manière de il suffit de charger l'action plutôt que de l'ensemble de la page? cet exemple semble charger l'application et la vue de link_to page. Que faire si je voulais le modifier.html.erb vue et rien d'autre? merci!
    • Récemment, j'ai fait quelque chose de similaire où mon action index a plusieurs enregistrements. Chaque enregistrement est associé à un modal avec des onglets. Chaque onglet a rendu un grand nombre de données. Au lieu de polluer le navigateur avec un tas de données qui ne peut être jamais vu sur ce point de vue, je l'ai chargé sur demande. Découvrez la Railscast code source pour voir comment Ryan t-il. Vous pouvez l'adapter à vos goûts. A pris ce qui aurait été un 500KB encombrement initial de 15 KO.
    • qui railscast?
    • Le Railscasts. 🙂 Ce n'est pas un épisode en particulier, mais plutôt celle de l'Railscasts site. github.com/ryanb/railscasts
    • fonctionne comme un rêve.
    InformationsquelleAutor kobaltz
  3. -2

    Il y a une erreur de syntaxe dans benchwarmer la réponse ci-dessus.

    essayez plutôt ceci:

    $(".a-unique-class").html('<%= j render "posts/form" %>')
    • cela devrait idéalement être un commentaire. aussi ce n'est qu'une partie de accepté de répondre à de sorte que vous ne devriez pas publier de telles réponses. vous pouvez éventuellement modifier la réponse (mais tout cela est possible seulement après avoir acquis une certaine réputation). lire Comment Répondre
    InformationsquelleAutor Madx