Posts
163
Comments
179
Trackbacks
5
Far convivere Thickbox e UpdatePanel

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


Technorati Tags: , ,


posted on giovedì 25 ottobre 2007 17:05 Print
Comments
Gravatar
# re: Far convivere Thickbox e UpdatePanel
Marco De Sanctis
25/10/2007 18:15
Ciao Alex!
1) Grazie mille delle citazioni! :)
2) Allarga 'sto caxx di box dei commenti :D:D:D

Detto questo, un piccolissimo appunto..
Occhio che pageLoad è un metodo "speciale", che viene richiamato automaticamente da MS Client Script Library al caricamento della pagina, senza aggiungere alcun handler. Quindi, nessun bisogno di

<body onload="pageLoad();">

Ma, e questo è stato un mio errore, cosa più importante è che pageLoad viene eseguito *sempre*, sia in caso di sync che di async postback, a differenza di un qualsiasi altro handler per l'evento onload del body.

Quindi, o richiami tb_init all'interno del pageload, altrimenti scrivi

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args)
{
....
}
</script>

oppure sul pageLoad verifichi di essere in async postback e richiami tb_init solo in quel caso:
function pageLoad(sender, args)
{
var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
if (isAsyncPostback)
tb_init();
}

Non l'ho provato, ma dovrebbe andare ;)

Scusami ancora, sono stato impreciso sul newsgroup.

Marco
Gravatar
# re: Far convivere Thickbox e UpdatePanel
Alessandro Sorcinelli
25/10/2007 20:14
Ho allargato la finestra! Era scomoda :P
Grazie per l'ulteriore commento. In effetit avevi ragione. Ho corretto in base al tuo commento.
Gravatar
# re: Far convivere Thickbox e UpdatePanel
Stefano
12/12/2007 18:02
Avevo lo stesso problema con JTip, e in questo modo ho risolto. Grande dritta
Comments have been closed on this topic.
News
Se volete sapere con chi avete a che fare eccomi qui in uno "scatto" lavorativo.

La mia foto

Logo MCAD
Logo MCTS