Liaison d’événements dans jQuery après la mise à jour Ajax (updatepanel)

J’ai plusieurs éléments d’entrée et d’option sur ma page, chacun (enfin presque) a un événement attaché pour mettre à jour du texte sur la page une fois qu’ils changent. J’utilise jQuery qui est vraiment très cool 🙂

J’utilise également le framework Microsofts Ajax , en utilisant le UpdatePanel. La raison pour laquelle je le fais 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 le UpdatePanel – même s’il pourrait (il peut le faire avec un certain effort) ê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 le UpdatePanel, les événements jQuery cessent de fonctionner. Je m’attendais à cela, car la “publication” n’est pas vraiment une nouvelle publication, donc mon code dans document.ready qui lie les événements ne sera plus déclenché. J’ai également confirmé mes soupçons en les lisant dans les bibliothèques d’aide de jQuery.

Quoi qu’il en soit, il me rest le problème de relier mes contrôles après la mise à jour de UpdatePanel. J’ai de préférence besoin d’une solution qui ne nécessite pas d’append plus de fichiers .js (plug-ins jQuery) à la page, mais quelque chose d’aussi simple que d’attraper la “afterupdating” .

    Puisque vous utilisez ASP.NET AJAX, vous avez access à un pageLoad événements pageLoad , 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 dans votre page, aucun twigment n’est requirejs.

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

    Ou vous pouvez vérifier les dernières fonctionnalités de jQuery via la méthode on() .

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

    A partir de jQuery 1.7, la méthode recommandée consiste à utiliser la syntaxe .on () de jQuery .

    Assurez-vous toutefois que vous configurez l’événement sur l’object du document , pas l’object DOM lui-même. Par exemple, cela se brisera après la publication de UpdatePanel :

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

    … parce que les “entrées” ont été réécrites. Faites ceci à la place:

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

    Tant que le document est présent, toutes les entrées (y compris celles de UpdatePanel actualisées) déclenchent le gestionnaire de modifications.

    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; } } } 

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

    Il présente de nombreux avantages en ce sens que vous réduisez le bruit de code (pas besoin de vous relier). C’est aussi 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énements facile.

    PS: Je suis sûr à 99% que la délégation sera dans le kernel jQuery à la prochaine version.

    Utilisez le code suivant, vous devez valider le contrôle utilisera le datapicker:

         

         

    dans le “si” vous pouvez mettre le code que vous avez besoin d’exécuter chaque fois que updatepanel fait AsyncPostBack.

    Liez vos événements en utilisant la nouvelle méthode «live» de jQuery. Il liera les événements à tous vos éléments présents et à tous les éléments futurs. Cha Ching! 🙂