Reconnecter le JS et le HTML après une injection via Ajax

Bonjour,

J'ai créé une page de recherche avec FacetWP et Advanced Custom Fields sur WordPress.

Dans la page de résultat j'ai ajouté la possibilité de modifier, pour chaque résultat, certains éléments comme par exemple changer l'image.

Sur la page d'accueil de la recherche, avec les résultats par défaut, tout fonctionne parfaitement, mais lorsque je fais une nouvelle recherche FacetWP importe le résultat via Ajax.
Du coup le Javascript n'est plus lié au nouveau code HTML. Pour que cela fonctionne il me faut recharger (F5) la page.

Pour pallier à ce souci, je sais qu'il faut utiliser

Code:

---

$(document).on('click', 'MyIDorClass', function(){ ...

---

Mon problème c'est que je ne sais pas quoi mettre dans le .on car les fonctions d’ACF sont anonymes. 8O

Quelqu'un aurait une solution à ce problème ?

Merci par avance :lol:

Nexus

Un peu léger pour diagnostiquer ...

Quand tu dis "importe le résulat"

Que fait l'ajax la première fois ?

Quand j'affiche la page de recherche, 15 résultats par défaut sont affichés. Ces résultats sont appelés et inclus via Ajax avant que la page finisse de s’initialiser. Donc le Javascript s’initialise avec le code HTML des résultats déjà présents.

Le problème vient quand une fois la page de recherche charger j’effectue une nouvelle recherche. A ce moment les scripts JS du plugin FacetWP vont chercher les résultats via Ajax et les importe dans la page. C’est donc du nouveau code HTML qui est inséré dans la page, sans que cette page ne soit rafraîchie.

Du coup le Javascript initialiser lors du chargement de la page ne reconnait pas ce nouveau code HTML.

Il faudrait que je puisse relancer l’initialisation de la page afin de relier le Javascript au nouveau code HTML importé.

Pour le moment la seule solution que j'ai trouvé c'est F5 :?

Citation:

---

et inclus via Ajax

---

Comment ?
Tu écrases du contenu de la page ?

Sinon je subodore un souci d'attrbution d'events..
regarde di coté de on() avec 3 paramètres pour attribuer l'event depuis le parent et ainsi prendre en compte les objets ajoutés post chargement
on encore avec delegate()

Citation:

---

Envoyé par SpaceFrog

Comment ?
Tu écrases du contenu de la page ?

---

Je n’écrase rien, le plugin FacetWP remplace le HTML.

Citation:

---

Envoyé par SpaceFrog

Sinon je subodore un souci d’attribution d'events..
regarde di coté de on() avec 3 paramètres pour attribuer l'event depuis le parent et ainsi prendre en compte les objets ajoutés post chargement
on encore avec delegate()

---

J'avais compris ça, mais je ne vois pas comment utiliser on() ou delegate() car je ne suis pas maître du code HTML/PHP/JS des plugins "Advanced Custom Fields (ACF)" et "FacetWP".

Je ne peux pas modifier les scripts de ces plugins, sinon à chaque mise à jour je serais obliger de refaire les modifications.

Vu que les fonctions JS d'ACF ( qui contrôle l'édition des champs ) sont anonymes, même si je rajoute dans la page ce code

Code:

---

1 2 3 4 5

jQuery(function($) { $(document).on('click', '[data-event="add-row"]', function(){ // Do Something }); });

---

Je ne sais pas quoi mettre à la place de "// Do Something"

PS ( je ne suis pas un expert en JS, enfin j'en suis plus un lol )

Citation:

---

Je n’écrase rien, le plugin FacetWP remplace le HTML.

---

Replacer le HTML = écraser le contenu de la page ...

Do something = attributions des évènements sur les objets au chargement de la page (ready).
Au lieu de faire une attribution simple dans le ready, qui attribue au éléments EXISTANTS lors du chargement de la page, il faut faire un on() à trois paramètres afin d'attribuer les events aux éléments qui seront ajoutés APRES LE READY (sur le retour d'ajax) à partir de leur conteneur parent.

Je crois que mon précédent message n'as pas été compris. Peut-être n'est il pas clair. :D

Quand je dis que je n’écrase rien, je veux dire que ce n'est pas de mon fait. C'est le plugin FacetWP qui remplace le code HTML. :lol:

J'ai bien compris qu'il faut faire un on() comme vous pouvez le constater dans la function que j'ai inclus dans mon précédent post.

Quand je dis que je ne sais pas quoi mettre à la place de Do something je parle littéralement. Je comprend le principe.

Voici une partie du code non minifier qui est chargé à la fin de la page :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

(function ($) { var Field = acf.Field.extend({ type: 'repeater', wait: '', events: { 'click a[data-event="add-row"]': 'onClickAdd', 'click a[data-event="duplicate-row"]': 'onClickDuplicate', 'click a[data-event="remove-row"]': 'onClickRemove', 'click a[data-event="collapse-row"]': 'onClickCollapse', showField: 'onShow', unloadField: 'onUnload', mouseover: 'onHover', unloadField: 'onUnload' }, onClickAdd: function (e, $el) { // validate if (this.isFull()) { this.showNotice({ text: acf.__('Maximum selection reached'), type: 'warning' }); return; }...

---

Comment déclencher l’événement onClickAdd à la place de Do something ?

Update :

Je n'ai toujours pa trouvé de solution autre que de faire une capture de l'url suivit d'un reload de la page.

Dois je continuer à chercher ou c'est sans espoir ?

Merci :D

Bonsoir à tous,

Et comme ça ?

Code:

---

1 2 3

$(document).on('click', 'a[data-event="add-row"]', function(){ Field.onClickAdd(arguments); });

---

?

Salut je comprends qu'il ne faut pas modifier un plugins wordpress si tu n'est pas l'auteur de ce plugin hors il existe pleins de moyen de le faire autrement.
Soit tu installe un plugin JS de customisation que tu lié a ta page genre https://fr.wordpress.org/plugins/custom-css-js/ soit tu extend celui de FacetWP et Advanced Custom Fields sur WordPress avec les hooks qui vont bien selon ta version utiliser de wordpress, mais dans tout les cas tu devra peut être modifier ton plugin et l'adapter s'il ne marche plus suite à une mise à jours, l'avantage c'est qu'au moins tes sources ne seront pas écrasé par la mise à jours.

Citation:

---

Envoyé par ASCIIDEFOND

Et comme ça ?
...

---

Merci ; j'avais essayé mais j'obtiens

Citation:

---

Uncaught ReferenceError: Field is not defined

---

:(

Citation:

---

Envoyé par headmax

Salut je comprends.... tes sources ne seront pas écrasé par la mise à jours.

---

J'avais bien penser à faire quelques chose dans le genre mais modifier le comportement d'Advanced Custom Fields c'est pas trop recommander. Et je suis pas sur d'avoir les competences lol

Je commence à me demander si c'est bien cette fonction qui est déclenchée lors du click. J'ai essayé de créer un Event Listeners Breakpoints>Mouse>Click mais avec ça j'ai surtout toutes les fonctions de gestion du click.

Si vous connaissez un bon tuto (Français/Anglais/Espagnol) sur comment trouvé la fonction déclencher par un click Je suis preneur :mouarf: