Mi è capito di dover sviluppare un progetto con finestre modali usate dall'utente per compilare dei form, i quali campi venivano inviati al controller attraverso chiamata AJAX.
Per gestire le finestre modali mi sono appoggiato a thickbox Thickbox e ho desciso di adottare come editor WYSIWYG TinyMCE nel quale non entro nel merito dell'installazione.
Per integrare Thickbox non è stato molto complicato, basta includere nella propria pagina i dovuti file CSS e JS, vi riporto in breve come mostrare finestre modali senza troppi sforzi.
Aggiungete nella vostra pagina il div che volete mostrare
ora posizionate da qualche parte il link per mostrare la finestra modale
<%= link_to "SHOW", '#', :onclick => "thickbox_win_show()" %>
e aggiungete in application.js il corpo della funzione
function thickbox_win_show(){ tb_show('Show Thickbox window', '#TB_inline?height=300&width=500&inlineId=thickbox_win','','') }
questo non fa altro che richiamare la funzione tb_show inclusa nel file thicbox.js, la quale mostra il div thickbox_win.
Ora all'interno del div thickbox_win ho aggiunto un form che chiama la create del controller containers, ad esempio:
Perfetto, nella finestra modale vedo la mia textarea in stile WYSIWYG grazie all'aiuto di TinyMCE, ma quando eseguo il submit del form, nell'hash passato al controller il campo :description è vuoto.
Per aggirare il problema ho dovuto forzare la copia del testo modificato con TinyMCE usando questo metodo
tinyMCE.triggerSave(true,true)
Il form modificato è il seguente
<% remote_form_for(:container, :url => {:controller => :containers, :action => :create }, :before => "tinyMCE.triggerSave(true,true)", :html => { :method => :post } ) do |f| %>
Ora funzionerà tutto alla grande :)