jQuery Girl
  1. jQuery Girl
  3. Exécution de scripts dans un fragment de page chargé avec ajax
Intereting Posts
Convertit la valeur de la variable JavaScript en fichier csv Le bloc setInterval de Javascript pour la fonction est-il renvoyé? Largeur de colonne avec le plugin colResizable pour la boucle à l’intérieur de l’append ne fonctionne pas obtenir une valeur de balise personnalisée à l’aide de jquery Deux demandes ajax sur le même événement au même moment. Quel devrait être le comportement typique? en quoi c’est différent si la requête est synchrone Comment envoyer une requête AJAX à un script Perl à l’aide de l’événement jQuery blur? Ajouter une cellule de table de débordement dans une cellule avec un en-tête Comment masquer une ligne de tableau en fonction d’une valeur dans l’une de ses colonnes Bootstrap: TypeError: $ (…) .modal n’est pas une fonction Comment afficher des informations en survolant la case à cocher? Problème Google Pie Chart-OnClick Comment envoyer un formulaire à l’aide de jquery (plug-in ajaxForm) vers un site externe, mais sans le recharger sur une autre page? Persiste js contrôles utilisateur nombre min max en saisie de texte – Jquery / javascript

Exécution de scripts dans un fragment de page chargé avec ajax

Mon application Web charge dynamicment des sections de son interface utilisateur avec jquery.ajax . Les nouvelles sections de l’interface utilisateur sont toutefois accompagnées d’un script. Je les charge comme tel:

Utilisation… 

 $.ajax({ url: url, dataType: 'html', success: function(data, textStatus, XMLHttpRequest) { $(target_selector).html( data ); update_ui_after_load(); } });

Cela fonctionne presque. Le problème est que les scripts inclus dans la partie dynamic de la page s’exécutent avant l’insertion du nouveau fragment de page dans le DOM. Mais souvent, ces scripts veulent modifier le code HTML avec lequel ils sont livrés. Ma meilleure solution jusqu’ici consiste simplement à retarder les scripts d’un laps de temps raisonnable pour permettre l’insertion du DOM, en les encapsulant dans un setTimeout : 

 window.setTimeout( function() { // process downloaded Fragment }, 300);

De toute évidence, ce n’est pas fiable et hideux. Quel est le meilleur moyen?

En utilisant

$ (fonction);

La fonction que vous transmettez à jQuery sera exécutée une fois le fragment en ligne sur la page. Je l’ai trouvé dans un problème de postback partiel et jQuery ASP.NET Ajax après avoir examiné votre question.

Êtes-vous familier avec la fonction live ()? Peut-être ce que vous cherchez ici.

http://api.jquery.com/live/

Le problème est que les scripts inclus dans la partie dynamic de la page s’exécutent avant l’insertion du nouveau fragment de page dans le DOM. Mais souvent, ces scripts veulent modifier le code HTML avec lequel ils sont livrés.

Je suis à peu près sûr que dans ce cas, la seule chose sensée est de placer le script après l’élément HTML.

Tout le rest deviendrait kludgy rapidement – je suppose que vous pourriez implémenter votre propre gestionnaire “prêt” qui sera exécuté après que votre code HTML ait été inséré, mais ce serait beaucoup de travail à implémenter sans réel bénéfice

Je l’ai résolu en créant un nouveau système de gestionnaire prêt simple comme suit … 

 var ajaxOnLoad = (function() { var ajaxOnLoad = {}; var onLoadQueue=[]; ajaxOnLoad.onLoad= function(fn) { onLoadQueue.push(fn); } ajaxOnLoad.fireOnLoad = function() { while( onLoadQueue.length > 0 ) { var fn = onLoadQueue.shift(); fn(); } } window.ajaxOnLoad = ajaxOnLoad; return ajaxOnLoad; })();

Ainsi, dans les pages chargées .ajax() , les scripts sont mis en queue pour s’exécuter avec 

 ajaxOnLoad.onLoad( function() { // Stuff to do after the page fragment is inserted in the main DOM });

et dans le code qui fait l’insertion, avant l’appel à update_ui_after_load() , lancez 

 ajaxOnLoad.fireOnLoad();

Une solution plus complète pourrait parsingr les pages, trouver des balises de script et les mettre automatiquement en queue. Mais comme j’ai le contrôle total des fragments insérés, il est plus facile pour moi de passer à ajaxOnLoad.onLoad .