Ho già citato in precedenza la libreria javascript jQuery. Per chi non la conoscesse consiglio vivamente di fare un salto sul sito e verificare cosa permette di fare.
Comunque su jQuery sono basati anche tutta una serie di plug-in che permettono di avere animazioni ed effetti, drag and drop, accordion e via di questo passo. Tra tutti questi plug-in quello che forse è il più conosciuto è il Thickbox che consente di aprire dei popup stile il ModalPopupExtender dell'AjaxControlToolkit.
L'aggiunta di questo popup è molto semplice: oltre all'inclusione dei file js e dei css relativi, è sufficiente aggiungere ad un generico anchor la classe thickbox:
<a href="fckedit/popup.aspx?TB_iframe=true&height=500&width=700" class="thickbox">Edit</a>
Nel mio caso utilizzo il Thickbox per visualizzare una pagina ASPX in cui è incluso l'FCKEditor.
Tutto funziona senza problemi fino a quando non si va ad inserire l'anchor in un UpdatePanel. Qui iniziano i problemi. Infatti dopo un AsyncPostback, generato da uno qualsiasi dei controlli presenti nell'UpdatePanell, i nostri anchor torneranno ad essere dei "link" normali e non apriranno più nessun popup.
Il perchè è dovuto al fatto che al caricamento lo script del Thickbox (come del resto quello del suo cugino Lightbox), esegue una funzione di inizializzazione (TB_init) che scorre il DOM alla ricerca degli anchor con la classe "thickbox" aggiungendo un handler che esegue lo script custom al click del link. L'handler si va a prendere i parametri direttamente dall'href. Nel caso precedente viene aperta una pagina ASPX in un iFrame e viene impostata la dimensione del popup.
Come ha giustamente sottolineato Marco nel forum "Il problema è che, dopo un AsyncPostback, il nodo <A> è un'istanza *DIVERSA* da quella precedente, pertanto senza l'handler che fa tutta la magia".
Per risolvere il problema è necessario quindi reinizializzare il thickbox ogni volta che viene eseguito un AsyncPostBack. Sempre grazie a Marco la soluzione è quella di aggiungere la seguente funzione lato client (a meno che di fare obrobri lato server come avevo fatto io ):
function pageLoad()
{
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback)
$(document).ready(TB_init);
}
Non è necessario richiamare la funzione pageLoad in quanto viene richiamata dall'MS Client Script Library al caricamento della pagina.
L'unica accortezza è quella di non richiamare più volte la funzione TB_init, in quanto si andrebbe ad aggiungere più volte l'handler ai vari anchor (il controllo sul tipo di postback serve proprio a questo).
Update: aggiornata la soluzione al problema in base al commento del solito Marco :)