IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Bidouilleur Professionnel
    Inscrit en
    mai 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Espagne

    Informations professionnelles :
    Activité : Bidouilleur Professionnel

    Informations forums :
    Inscription : mai 2022
    Messages : 4
    Points : 1
    Points
    1
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $(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.

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

    Merci par avance

    Nexus

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 110
    Points : 65 651
    Points
    65 651
    Billets dans le blog
    1
    Par défaut
    Un peu léger pour diagnostiquer ...

    Quand tu dis "importe le résulat"

    Que fait l'ajax la première fois ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Bidouilleur Professionnel
    Inscrit en
    mai 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Espagne

    Informations professionnelles :
    Activité : Bidouilleur Professionnel

    Informations forums :
    Inscription : mai 2022
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    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

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 110
    Points : 65 651
    Points
    65 651
    Billets dans le blog
    1
    Par défaut
    et inclus via Ajax
    Comment ?
    Tu écrases du contenu de la page ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 110
    Points : 65 651
    Points
    65 651
    Billets dans le blog
    1
    Par défaut
    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()
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Bidouilleur Professionnel
    Inscrit en
    mai 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Espagne

    Informations professionnelles :
    Activité : Bidouilleur Professionnel

    Informations forums :
    Inscription : mai 2022
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    Comment ?
    Tu écrases du contenu de la page ?
    Je n’écrase rien, le plugin FacetWP remplace le HTML.


    Citation Envoyé par SpaceFrog Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 )

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 110
    Points : 65 651
    Points
    65 651
    Billets dans le blog
    1
    Par défaut
    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.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Nouveau Candidat au Club
    Homme Profil pro
    Bidouilleur Professionnel
    Inscrit en
    mai 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Espagne

    Informations professionnelles :
    Activité : Bidouilleur Professionnel

    Informations forums :
    Inscription : mai 2022
    Messages : 4
    Points : 1
    Points
    1
    Par défaut
    Je crois que mon précédent message n'as pas été compris. Peut-être n'est il pas clair.

    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.

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

Discussions similaires

  1. Transmettre une variable via ajax
    Par maristar dans le forum AJAX
    Réponses: 5
    Dernier message: 07/05/2018, 10h47
  2. [XL-2007] rafraichir un listbox apres une entré via un bouton
    Par svbb25 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 12/08/2016, 07h09
  3. Remplir une listview via AJAX
    Par Blunt dans le forum ASP.NET
    Réponses: 2
    Dernier message: 04/01/2012, 17h53
  4. [AJAX] Ecriture de balise html dans une BDD avc AJAX
    Par togzz dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/11/2008, 10h59
  5. ajout d'un tableau dans une page html après un clic
    Par jehlg dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 15/02/2006, 17h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo