Rails 3.2 Modal popup sur l'action

Je ne suis pas sûr de savoir comment @événements se rapporte à votre modèle de Carnet, mais en supposant que nous allons juste hors d'un seul modèle (Livre), c'est un moyen de votre code pourrait être mis en place:

---

app/views/livres/index.html.erb

Où vous itérer @livres et inclure le lien "Afficher les Détails", avec la télécommande: true set pour activer AJAX.

<table>
<% @books.each do |book| %>
<tr>
  <td><%= book.title %></td>
  <td><%= book.author %></td>
  <td><%= number_to_currency(book.price) %></td>
  <td><%= link_to 'View Details', book, remote: true %></td>
</tr>
<% end %>
</table>

Sur cette page, vous devez également rendre votre modal/boîte de dialogue, mais il devrait avoir une classe sur qui le garde caché (vous aurez plus tard à bascule de cette avec JS/jQuery). J'ai utilisé un partiel pour garder le code plus modulaire, mais vous pourriez mettre juste le modal divs directement au-dessous.

<%= render "layouts/modal" %>

---

app/views/layouts/_modal.html.erb

Partielle avec la structure du modèle. J'ai utilisé Twitter Bootstrap version, qui a prédéfinis style ainsi que quelques belles animation se déclenche.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 class="modal-heading">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Add to Cart</a>
  </div>
</div>

---

app/controllers/books_controller.rb

Si votre contrôleur est configuré avec le standard de l'échafaudage, vous n'aurez qu'à ajouter format.js pour le bloc respond_to de l'action show. Cela entraîne automatiquement un fichier nommé show.js.erb (qui vous devez créer manuellement) lorsque l'action est déclenchée.

def show
    @book = Book.find(params[:id])

    respond_to do |format|
        format.html # show.html.erb
        format.js # show.js.erb
        format.json { render json: @book }
    end
end

---

app/views/livres/montrer.js.erb

Comme vous l'avez justement dit, c'est là que la magie opère et l'AJAX réponse est envoyée à votre page. À l'aide de jQuery, je suis certaines variables et de remplacer le code HTML dans la lightbox modèle avec celui rendu par @livre (qui vient d'un partiel, vous devez créer nommé _book.html.erb).

$modal = $('.modal'),
$modalBody = $('.modal .modal-body'),
$modalHeading = $('.modal .modal-heading');
$modalHeading.html("<%= @book.title %>");
$modalBody.html("<%= escape_javascript(render @book) %>");
$modal.modal();

---

app/views/_book.html.erb

C'est l'endroit où vous créez le modèle de ce qui se passe à l'intérieur de l'modal sur le succès de la réponse AJAX.

<p><b>Title:</b> <%= @book.title %></p>

<p><b>Author:</b> <%= @book.author %></p>

<p><b>Price:</b> <%= number_to_currency(@book.price) %></p>

<p><b>Description:</b> <%= @book.description %></p>

<p><b>Publisher:</b> <%= @book.publisher %></p>

<p><b><%= @book.style %></b> <%= @book.number_of_pages %> pages</p>

<p><b>ISBN:</b><%= @book.ISBN %></p>

<%= link_to 'Edit', edit_book_path(@book) %> |
<%= link_to 'Show', @book %> |
<%= link_to 'Remove', @book, method: :delete, data: { confirm: 'Are you sure?' } %>

J'ai créé un exemple de la Librairie de l'application l'aide de ce code sur Github. Espérons que cette aide.

OriginalL'auteur Web Guy Ian