Blog Stats
  • Posts - 171
  • Articles - 1
  • Comments - 197
  • Trackbacks - 5

 

JQuery, TabContainer e UpdatePanel per la notifica di modifica di una form

Durante la creazione di form è spesso necessario implementare un meccanismo che consenta di avvisare l'utente che i dati nella form sono cambiati ed è quindi necessario procedere al salvataggio.

Questo succede per esempio quando ho form complesse fatte a tab ed il passaggio da un tab all'altro presuppone che un messaggio avvisi l'utente che ci sono dei campi variati nel tab che si sta abbandonando ed è quindi necessario aggiornarlo.

Ipotizziamo uno scenario in cui utilizziamo ASP.NET ed Ajax dove avremo un UpdatePanel con al suo interno il TabContainer dell' AjaxControlToolkit. Ogni TabContainer conterrà la propria FormView con tutti i controlli di input necessari:

...
<ajaxToolkit:TabContainer runat="server" ID="TabContainerControl" OnClientActiveTabChanged="clientActiveTabChanged">
  <ajaxToolkit:TabPanel ID="Tab1" runat="server" HeaderText="Tab 1">
    <ContentTemplate>
      <div id="Tab1">
        <!--...ascx, formview, ...-->
      </div>
    </ContentTemplate>
  </ajaxToolkit:TabPanel>
...

Prima di tutto agganciamo l'evento client OnClientActiveTabChanged del TabContainer ad una funzione javascript dove:
  1) verificherò che qualcosa nel tab da cui provengo è cambiato
  2) se ci sono dati variati e l'utente conferma, aggiorno il tab da cui provengo

function clientActiveTabChanged(sender, args) {
  var activeIndex = sender.get_activeTabIndex();
  if (tabChanged) {
    if (window.confirm('Sono stati modificati dei dati.Prima di passare alla sezione successiva è necessario salvare le modifiche.\n\nClicca \'OK\' per procedere con il salvataggio.')) {
          __doUpdateTab(exActiveIndex);
        }
      }
  
  tabChanged = false;
  exActiveIndex = activeIndex;
}

La funzione __doUpdateTab si occupa di effettuare una chiamata di tipo postback dove verrà gestito, lato server, l'aggiornamento del tab.La variabile javascript tabChanged indica se ci sono state modifiche in un tab.

La cosa interessante ed anche la più importante di tutto il post è l'utilizzo di JQuery per generare velocemente gli eventi di notifica su tutti i controlli di tipo input per ciascun tab:

            jQuery(document).ready(
              function() {
                  jQuery('#Tab1 :input').bind('change',
                function(event) {
                    tabChanged = true;
                });
              });
 

Con queste poche righe di javascript, utilizzando JQuery, abbiamo agganciato l'evento client di change su tutti i controlli di tipo input che ci sono all'interno di un div che ha per id Tab1, che nel nostro caso corrisponde al div contenitore del primo TabPanel.

IMPORTANTE: se si usa tutto quando descritto all'interno di un UpdatePanel(per esempio posizionato all'interno di una master page) succede che dopo un qualsiasi postback il javascript relativo agli eventi di change non risponde più. E' quindi necessario registrare tutti i javascripts sopra direttamente da codice, utilizzando le procedure corrette.

NB. ho preso spunto da questo post di Rick Strahl.

del.icio.us Tags: ,,


Feedback

# re: JQuery, TabContainer e UpdatePanel per la notifica di modifica di una form

Gravatar JQuery mi dà il vantaggio di associare velocemente e semplicemente una funzione javascript all'evento di change di tutti i controlli di input.

Nella funzione di change, setto una variabile globale che ho chiamato tabChanged come indicatore che qualche controllo di input nel tab corrente è cambiato di valore.

L'evento clientActiveTabChanged viene invocato direttamente dal javascript associato al TabContainer(iniettato quindi dall'extender ajax su cui si basa il controllo stesso) ed è li che testo il valore della variabile tabChanged per agire di conseguenza.

Spero di averti chiarito.Nel post effettivamente non ho descritto completamente il processo, mi interessava di più sottolineare la potenza di Jquery e gli accorgimenti del caso nell'uso insieme all'UpdatePanel. 9/21/2008 8:33 PM | Luca

# re: JQuery, TabContainer e UpdatePanel per la notifica di modifica di una form

Gravatar Si grazie.
Anche a me piace molto JQuery per via di questi shorcut che ti fornisce, al posto di odiosi Loop che verificano questo e quello per capire se e' IE, FF, una text, una combo, e via dicendo.
Thanks 9/22/2008 7:01 PM | Raffaeu

Comments have been closed on this topic.
 

 

Copyright © Luca Mauri