web-dev-qa-db-fra.com

Relier les événements dans jQuery après la mise à jour Ajax (updatepanel)

J'ai plusieurs éléments d'entrée et d'options sur ma page, chacun (enfin presque) a un événement attaché pour mettre à jour du texte sur la page une fois qu'ils ont changé. J'utilise jQuery qui est vraiment vraiment cool :)

J'utilise également Microsofts Ajax framework, en utilisant le UpdatePanel. La raison pour laquelle je fais cela est que certains éléments sont créés sur la page en fonction d'une logique côté serveur. Je ne veux pas vraiment expliquer pourquoi j'utilise UpdatePanel - même s'il pourrait (il peut avec beaucoup d'efforts) être réécrit pour utiliser uniquement jQuery Je veux toujours que UpdatePanel.

Vous l'avez probablement deviné - une fois que j'ai une publication sur UpdatePanel, les événements jQuery cessent de fonctionner. En fait, je m'y attendais, car le "postback" n'est pas vraiment un nouveau postback, donc mon code dans document.ready qui lie les événements ne sera pas renvoyé. J'ai également confirmé mes soupçons en le lisant dans les bibliothèques d'aide de jQuery.

Quoi qu'il en soit, je me retrouve avec le problème de relier mes contrôles une fois que UpdatePanel a terminé la mise à jour du DOM . J'ai de préférence besoin d'une solution qui ne nécessite pas d'ajouter plus de fichiers .js (plug-ins jQuery) à la page, mais quelque chose d'aussi simple que de pouvoir attraper la `` mise à jour '' de UpdatePanel où je peux simplement appeler ma méthode pour relier tous les éléments du formulaire .

asp.netjqueryasp.net-ajaxupdatepanel
78
Per Hornshøj-Schierbeck

Puisque vous utilisez ASP.NET AJAX, vous aurez accès à un gestionnaire d'événements pageLoad, qui est appelé à chaque fois que la page est publiée, qu'elle soit complète ou partielle à partir d'un UpdatePanel. Il vous suffit de mettre la fonction sur votre page, aucune connexion n'est requise.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}
84
Phil Jenkins

Ou vous pouvez vérifier la dernière fonctionnalité en direct de jQuery via la méthode on() .

23
George
Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}
21
Paulius

À partir de jQuery 1.7, la méthode recommandée pour cela est d'utiliser la syntaxe .on () de jQuery.

Assurez-vous cependant que vous avez configuré l'événement sur l'objet du document , pas sur l'objet DOM lui-même. Par exemple, cela se cassera après la publication UpdatePanel:

$(':input').on('change', function() {...});

... car les ': entrées' ont été réécrites. Faites ceci à la place:

$(document).on('change', ':input', function() {...});

Tant que le document est autour, toutes les entrées (y compris celles des mises à jour UpdatePanel) déclencheront le gestionnaire de modifications.

14
lambinator

Utilisez le code suivant

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}
9
shatl

Vous pouvez utiliser jQuery et la délégation d'événements. Accrochez les événements aux conteneurs plutôt qu'à chaque élément et interrogez le fichier event.target et exécutez le script en fonction de cela.

Il présente de multiples avantages en ce que vous réduisez le bruit du code (pas besoin de relier). Il est également plus facile sur la mémoire du navigateur (moins d'événements liés dans le DOM.)

Exemple rapide ici .

plugin jQuery pour une délégation d'événement facile.

P.S Je suis sûr à 99% que la délégation sera dans le noyau jQuery lors de la prochaine version.

8
redsquare

Utilisez le code suivant, vous devez valider le contrôle utilisera le sélecteur de date:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>
5
rocke_amiga
         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

dans le "si", vous pouvez mettre le code dont vous avez besoin à exécuter chaque fois que le panneau de mise à jour fait AsyncPostBack.

4
civanm

Liez vos événements à l'aide de la nouvelle méthode "live" de jQuery. Il liera les événements à tous vos éléments présents et à tous ceux à venir également. Cha Ching! :)

2
John Strickler