Forum: Italian Ruby user group render Bootstrap Modals

2922e324de4340e97d654bb27396f0d7?d=identicon&s=25 Alberto Bissacco (albyb)
on 2013-05-31 11:44
Ciao a tutti,
non riesco a capire come renderizzare un oggetto preso da un'altro
controller su delle finestre modali.

Ho una pagina con delle foto visualizzate in piccolo da delle thumbnail
e cliccandoci sopra, volevo aprire un modale dove visualizzare la foto
ad una risoluzione maggiore con alcune informazioni.

Ho questo controller con questi due metodi per la home page(index) e la
foto(show)

class Photo
 def index
   @photos = [....]
 end

 def show
   @photo = url e info
 end
end

mentre nelle view ho questo:

#index.html.erb
<ul class="thumbnails">
  <%= link_to "#showphoto", :data => {:toggle => "modal"} do %>
    <% @photos.each do |p| %>
    <li class="span2">
      <div class="thumbnail">
        <%= image_tag p.thumbnail %>
      </div>
    </li>
    <% end %>
  <% end %>
</ul>
<% render "shared/showphoto_modal" %>

#_showphoto_modal.html.erb
<div id="showphoto" class="modal hide">
  <div class="modal-body">
    <%= image_tag @photo.url %>
    <%= @photo.info %>
  </div>
</div>

Il modale, messo in un "partial", dovrebbe chiamare il metodo "show" per
la foto selezionata ma non riesco a capire come gestire questa cosa ...
6dbddfda34303f8d83620f7293612671?d=identicon&s=25 Tommaso Visconti (Guest)
on 2013-05-31 12:14
(Received via mailing list)
Il 31/05/13 11:44, Alberto Bissacco ha scritto:
> Ciao a tutti,
> non riesco a capire come renderizzare un oggetto preso da un'altro
> controller su delle finestre modali.

mmm, nel codice ci sono parecchi problemi, entro nel dettaglio:

>   end
> end
>

due metodi ti servono per due azioni diverse, mentre col modal te ne
basta una, oppure, se carichi il contenuto dei vari modal in ajax, ti
serve una seconda azione che restituisca soltanto l'immagine e non tutto
il layout. Nel tuo esempio comunque serve soltanto index

>      </li>
>      <% end %>
>    <% end %>
> </ul>

qui hai solo 1 link_to in cui inserisci tutte le foto, devi invece avere
1 link per ogni foto che faccia riferimento ad 1 modal. Ed ogni link
deve essere unico altrimenti non sa quale modal aprire.

 > <% render "shared/showphoto_modal" %>

qui manca un = (ovvero <%= ) quindi questo partial non viene mostrato,
ma forse  un typo nella mail.
Devi per poi specificargli cosa mostrare.

Un codice di esempio che dovrebbe funzionare (non l'ho provato):

<ul class="thumbnails">
   <% @photos.each do |p| %>
     <li class="span2">
       <div class="thumbnail">
         <%= link_to "#showphoto_#{p.id}", :data => {:toggle => "modal"}
do %>
           <%= image_tag p.thumbnail %>
         <% end %>
         <%= render "shared/showphoto_modal", locals: { photo: p } %>
       </div>
     </li>
     <% end %>
   <% end %>
</ul>

#_showphoto_modal.html.erb
<div id="showphoto_<%= photo.id %>" class="modal hide">
   <div class="modal-body">
     <%= image_tag photo.url %>
     <%= photo.info %>
   </div>
</div>


> Il modale, messo in un "partial", dovrebbe chiamare il metodo "show" per
> la foto selezionata ma non riesco a capire come gestire questa cosa ...

no, non chiama "show", il metodo show viene mostrato se routes.rb sa
della sua esistenza (ad esempio se c' un "resources :photos") e se apri
la pagina relativa, es: /photos/3
renderizzando un partial in index.html.erb rimani sempre dentro il
metodo index. La guida ufficiale sulle rotte  fatta molto bene e
sicuramente riesce a spiegarsi meglio di me :)
http://guides.rubyonrails.org/routing.html
2922e324de4340e97d654bb27396f0d7?d=identicon&s=25 Alberto Bissacco (albyb)
on 2013-05-31 12:33
Grazie Tommaso.
Il codice che ho scritto e esemplificativo ed era solo per dimostrare
come avevo improntato i controller e le view.

Il metodo show esiste per visualizzare la view della foto. Il modale
serviva solo per avere una "preview" senza mandare l'utente avanti e
indietro dalle diverse pagine.

All'inizio avevo fatto come dici tu, mettendo un modale per ogni foto e
caricando nella index sia le varie foto in alta risoluzione che le info
per ogni foto, ma pensavo che ci fosse un modo migliore per farlo.

Nel modo che hai consigliato tu (se ho capito bene), e come avevo fatto,
appesantisco la index perchè devo caricare più dati.
Volevo invece caricare la foto (in alta ris.) e le info solo al clic
della foto selezionata, andando a renderizzare un "partial" dalla vista
show.

Forse sto complicando io le cose. Ma chiedo se qualcuno di voi ha dei
suggerimenti :)
Grazie cmq ancora della risposta

Alberto
6dbddfda34303f8d83620f7293612671?d=identicon&s=25 Tommaso Visconti (Guest)
on 2013-05-31 12:46
(Received via mailing list)
Il 31/05/13 12:33, Alberto Bissacco ha scritto:
> per ogni foto, ma pensavo che ci fosse un modo migliore per farlo.
>
> Nel modo che hai consigliato tu (se ho capito bene), e come avevo fatto,
> appesantisco la index perch devo caricare pi dati.
> Volevo invece caricare la foto (in alta ris.) e le info solo al clic
> della foto selezionata, andando a renderizzare un "partial" dalla vista
> show.
>
> Forse sto complicando io le cose. Ma chiedo se qualcuno di voi ha dei
> suggerimenti :)

ok, il metodo c' e consiste nel caricare il contenuto del body del
modal via ajax, devi inserire in data-target l'id del modale da mostrare
e in href l'url della pagina da mostrare dentro modal-body. questo
l'esempio preso dalla pagina di bootstrap:

<a data-toggle="modal" href="remote.html" data-target="#modal">click
me</a>

in href puoi ad esempio mettere l'url corrispondente allo show della
foto, devi solo stare attento che l'azione show restituisca solo il
contenuto html che andr nel modale e non tutto il layout

quel che vorrei sottolineare  che con un partial non renderizzi
un'azione di un controller, pi semplicemente dividi la vista di
un'action (nel tuo caso index) in pi file

ciao
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.