Render Bootstrap Modals

Community IT
1

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

    <%= link_to "#showphoto", :data => {:toggle => "modal"} do %> <% @photos.each do |p| %>
  • <%= image_tag p.thumbnail %>
    • <% end %> <% end %>
<% render "shared/showphoto_modal" %>

#_showphoto_modal.html.erb

<%= image_tag @photo.url %> <%= @photo.info %>

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

2

Il 31/05/13 11:44, Alberto B. 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 %>

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):

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

#_showphoto_modal.html.erb

<%= image_tag photo.url %> <%= photo.info %>

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 :slight_smile:

3

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 :slight_smile:
Grazie cmq ancora della risposta

Alberto

4

Il 31/05/13 12:33, Alberto B. 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 :slight_smile:

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:

click
me

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