Autocompletion sur des champs texte créés dynamiquement

Version imprimable

22/11/2020, 18h00
tarah01

2 pièce(s) jointe(s)

Autocompletion sur des champs texte créés dynamiquement

Bonjour,
Je n'arrive pas faire fonctionner l'autocompletion sur des champs générés dynamiquement dans un formulaire, alors que l'autocompletion fonctionne sur des champs fixes, voir image ci-joint

Pièce jointe 584671

Pièce jointe 584673

J'ai déclaré le fichier javascript dans le formulaire d'origine et le fichier générant ces 2 champs en vain

Quelqu'un a t'il une idée sur la façon de procéder ?
En vous remerciant d'avance pour votre aide.

Cordialement,
Tarah
22/11/2020, 20h31
mathieu

montrez nous le code qui gère l'autocomplétion sur les champs qui fonctionnent.

=============================================================
Fichier formFormation.php contenant le formulaire php avec champs fixes et le script jquery
=============================================================

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
....
?>
 <script>
$( function() {
    $( ".mailAutocompleteInscription" ).autocomplete({
                source: "mailAutocomplete.php",
                minLength: 2
    });
    
  } );
  </script>
 
<?php    
....
 
  echo "<fieldset  style=\"border:solid 1px black; padding:20px; width:50%;\"><legend><strong>Courriels des responsables</strong> </legend>";
         echo "<table>";
  
/* Explication :
 
méthode appelée depuis une classe Formulaire
===================================
 public function creerChampTexte($type,$nom,$size,$placeholder,$pattern,$id,$class,$required){
        
        $ch ="<input type=\"$type\" name=\"$nom\" size=\"$size\"";
        if(!empty($placeholder)) $ch.= " placeholder=\"".$placeholder."\""; 
        if(!empty($pattern)) $ch.=" pattern=\"$pattern\"";
        if(!empty($id)) $ch.=" id=\"".$id."\"";
        if(!empty($class)) $ch.=" class=\"".$class."\"";
        if(!empty($required)) $ch.=" required";
        $ch.=" />";
        return $ch;
    }
 
===========================
*/
 
         echo "<tr><th><label for=\"Adresse de messagerie de votre N+1\"><nobr>Courriel du N+1 <sup>*</sup> : </nobr></label></th><td>".
                 $formInscription->creerChampTexte("email", "mailN1", "75", "Courriel du N+1","" ,"" ,"mailAutocompleteInscription","required")."</td></tr>";
 
         echo "<tr><th><label for=\"Adresse de messagerie de votre N+2\"><nobr>Courriel du directeur / de la directrice<sup>*</sup> : </nobr> </label></th><td>".
                 $formInscription->creerChampTexte("email", "mailN2", "75", "Courriel du directeur / de la directrice","" ,"","mailAutocompleteInscription","required")."</td></tr>";
         echo "</table>";
         echo "</fieldset>";
 
 
...etc.
?>

=============================
Contenu du fichier mailAutocomplete.php
=============================

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE ^E_DEPRECATED);
 
require_once("path.inc.php");
$fonct=new Fonctions();
$listeMails=array();
$term=$_GET["term"]; 
$conxLdap= $fonct->connexionLdap();
   if($conxLdap){
         $term1=$term."*";
     
        $filter = "(&(mail=$term1)(eduPersonAffiliation=employee))";
        $champs=array("mail");
        $r=ldap_search($conxLdap,$people,$filter,$champs);
                
        if(!$r) die ("pb ldap_search <br>");
        $info=ldap_get_entries($conxLdap,$r);
        $cpte= $info["count"];  
        for($i=0;$i<$cpte;$i++){              
            $mail=$info[$i]['mail'][0];
           
           array_push($listeMails, $mail);
        }
     
        echo json_encode($listeMails);
   }
    $fonct->deconnexionLdap($conxLdap); 
?>

En espérant que c'est clair pour vous.

Tarah

23/11/2020, 06h54
mathieu

s'il s'agit de l'autocomplétion de jQuery, essayez d'appeler $(".mailAutocompleteInscription").autocomplete... après chaque construction de nouveaux éléments.
24/11/2020, 10h29
SpaceFrog

Ou encore faire un on() (3 paramètres) ou delegate() à partir du parent ...
24/11/2020, 12h51
mathieu

Citation:

Envoyé par SpaceFrog

Ou encore faire un on() (3 paramètres) ou delegate() à partir du parent ...

j'avais aussi pensé à ça mais j'ai l'impression que ce n'est pas utilisable avec la façon dont est appelée cette fonctionnalité :
https://jqueryui.com/autocomplete/
24/11/2020, 13h12
SpaceFrog

En effet..

Mais on doit pouvoir le faire en trouvant l'évent invoqué par le plugin ...
24/11/2020, 15h01
tarah01

2 pièce(s) jointe(s)

Bonjour,
Les scripts jquery ne semblent pas s’exécuter dans les parties dynamiques (ou intermédiaires) générées via Ajax
Pièce jointe 584848

Pièce jointe 584849
J'ai beau cliquer sur la partie dynamique "Cliquez-moi j'alerte dans le fichier enfant", il ne se passe rien

J'ai aussi enlevé l'id et modifié/commenté le code du 2ème script =>idem.

Merci d'avoir tenter de m'aider.
Cordialement
Tarah
24/11/2020, 18h19
ProgElecT

Salut

S'il vous plait, plutôt que des captures d'écran de votre code, copier/coller le entre les balises [CODE] [/CODE] bouton # de l'éditeur.