Quantcast
Channel: javascript in update panel
Viewing all articles
Browse latest Browse all 3

javascript in update panel

$
0
0

Spiegazione del perché dopo il postback asincrono (AsyncPostBack) la tua funzione "non funziona".

In realtà la funzione c'è e funziona, ma l'oggetto è stato sostituito. Quello che l'UpdatePanel effettivamente fa è il rimpiazzare tramite JavaScript l'HTML ottenuto con una chiamata AJAX. In pratica la "Label1" (insieme a tutto il contenuto dell'UpdatePanel) viene rimosso dal DOM della pagina (e quindi anche tutti gli eventi associati a tali oggetti). Poi viene rimpiazzato da unanuova"Label1" che ovviamente non ha l'evento "hover" che gli hai agganciato con jQuery.
E il $(document).ready() non viene scatenato da questa chiamata AJAX, perché il documento HTML è rimasto lo stesso.

Sì, il modo in cui hai gestito il meccanismo è corretto, la funzione rimane la stessa sulla pagina ma cambiano gli attori che la richiamano.
La funzione può rimanere "generica" e non deve essere ri-creata con l'aggiornamento del contenuto dell'UpdatePanel.

Suggerimenti.

1) Passa a jQuery 1.9.1.  Non ti suggerisco il 2.x perché è una major release e cambiano molte cose e purtroppo c'è qualche problema di retrocompatibilità con i moltissimi esempi che trovi oggi in rete.

2.a) Usi var className, ma poi non la utilizzi e invece con removeClass() privo di parametri elimini tutte le classi CSS dell'elemento.className mi pare inutile. 
2.b) Vedi toggleClass. Ad esempio toggleClass("label_1", "label_2") mi pare faccia al caso tuo.

3) Se il tuo intento è avere l'highlight sulla Label quando ci sei sopra con il mouse e rimuoverlo quando non ci sei sopra, il solo onmouseover non basta, deve andare in coppia con onmouseout. Oppure i mouseenter/mouseleave. Oppure utilizza la.hover (come facevi nel primo esempio) con i due handler del caso (la documentazione ha un ottimo esempio).

4) Il modo per ottenere ciò che intendevi fare nel tuo primo esempio è iniettando codice JavaScript insieme al contenuto dell'UpdatePanel. La metodologia adottata nel secondo caso è corretta ma questo diverso modo ti tornerà certamente utile per altre situazioni.

protected override void OnPreRender(EventArgs e)
		{base.OnPreRender(e);string script = @"$(function()){ // versione 'short' di $(document).ready(...)	alert(""eseguito sempre, anche negli AsyncPostBack"");		$('#Label1')...}		";ScriptManager.RegisterStartupScript(thistypeof(Page), "pre render"scripttrue); 
		}

A dire il vero qui sopra c'è lo stesso errore (probabilmente qui hai riportato una versione differente dal tuo codice originale) percui l'ID lato client della Label1 non è certamente "Label1", ma probabilmente qualcosa tipo "ctl00_main_Label1" (questoè vero a meno che tu stia usando ClientIDMode = Static). Per ottenere l'ID lato client si usa <%= Label1.ClientID %>, quindi 

$('#<%= Label1.ClientID %>');

Sembrerebbe una alternativa all'inserire uno <script> nel ContentTemplate dell'UpdatePanel, ma in quel caso il $(document).ready() non viene scatenato, il meccanismo di "iniezione" del JavaScript è differente, RegisterStartupScript è il modo corretto.

5) [non mi ricordo più]

Ciao




Viewing all articles
Browse latest Browse all 3

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>