Rails 3.2 Modal popup on show action

Aucune des questions sur ce forum ne semble répondre à mon besoin spécifique. En gros, j’ai un bouton “Détails”. Je veux que quand il clique, une boîte de dialog modale apparaît avec des informations tirées du show.html.erb du modèle. J’ai un modèle book.rb. Dans la page d’index, j’ai:

En cliquant sur ce bouton, cela me mènerait normalement à la page book / id, en utilisant l’action show. Mais je ne veux pas qu’il quitte la page, je veux plutôt un popup modal qui peut être fermé. J’ai essayé tous les codes jquery et javascript sur des sujets connexes dans ce forum, mais aucun ne semble faire l’affaire. La plupart semblent être adressés pour créer uniquement des actions ou des actions personnalisées.

Juste pour éviter toute répétition, j’ai essayé ce qui suit, mais aucun n’a fonctionné:

Ce:

 You could look at modal dialogs by www.jqueryui.com. Add jquery ui to your application. Put a hidden div (display:none) in your layout page.  Your link should be an ajax link:  true %> Your controller should accept ajax response: def show @event = Event.find(params[:id]) respond_to do |format| format.js end end This is where the magic happens. After pressing the link via ajax, your show.js file will insert content into your empty hidden div and display the popup. Your views should have a javascript file: /view/events/show.js.erb $('.modal').html(); //inserts content into your empty div. $('.modal').dialog(); //jquery ui will open it as a modal popup 

Ce:

 $('a[data-popup]').live('click', function(e) { window.open($(this).attr('href')); e.preventDefault(); }); 

Et ça:

 $('a[data-popup]').live('click', function(e) { window.open($(this).attr('href')); e.preventDefault(); }); = link_to( 'Create a new company', new_company_path, 'data-popup' => true ) 

Une aide les gars? Noob total ici.

Je ne suis pas certain de la relation entre @events et votre modèle Book, mais si nous partons d’un modèle unique (Book), votre code pourrait être configuré de la façon suivante:


app / views / books / index.html.erb

Où vous parcourez @books et incluez le lien vers “Afficher les détails” avec la commande remote: true définie pour activer AJAX.

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

Sur cette page, vous devez également afficher votre boîte de dialog modale /, mais une classe doit la garder masquée (vous basculerez par la suite avec JS / jQuery). J’ai utilisé un partiel pour que le code soit plus modulaire, mais vous pouvez simplement placer les div modal directement en dessous.

 <%= render "layouts/modal" %> 

app / views / layouts / _modal.html.erb

Ceci est partiel avec la structure du modèle. J’ai utilisé la version de Twitter Bootstrap, qui propose un style prédéfini ainsi que de jolis déclencheurs d’animation.

  

app / controllers / books_controller.rb

Si votre contrôleur est configuré avec l’échafaudage standard, il vous suffit d’append format.js au bloc respond_to de l’action show. Cela rendra automatiquement un fichier nommé show.js.erb (que vous devez créer manuellement) lorsque cette 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 / books / show.js.erb

Comme vous l’avez bien dit, c’est ici que la magie opère et que la réponse AJAX est envoyée à votre page. Avec jQuery, je définis des variables et je remplace le code HTML du modèle modal par celui rendu par @book (qui provient d’un partiel que vous devez créer et 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à que vous créez le modèle pour ce qui ira à l’intérieur du modal sur la réponse AJAX réussie.

 

Title: <%= @book.title %>

Author: <%= @book.author %>

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

Description: <%= @book.description %>

Publisher: <%= @book.publisher %>

<%= @book.style %> <%= @book.number_of_pages %> pages

ISBN:<%= @book.ISBN %>

<%= 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 d’application Bookstore à l’ aide de ce code sur Github. J’espère que cela t’aides.

“.live” est obsolète dans jQuery. Avez-vous essayé de remplacer

 $('a[data-popup]').live('click', function(e) ... 

par

 $('a[data-popup]').on('click', function(e) ... 

À votre santé