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 :

Autocomplétion de champs[ ] créés dynamiquement


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    129
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 129
    Par défaut Autocomplétion de champs[ ] créés dynamiquement
    Bonjour,
    Voilà plusieurs jours (pour ne pas dire plus longtemps) que je tente de créer ceci:

    - Un champs où l'utilisateur rentre une occupation. Ce champs est autocomplété via Jquery.
    - L'utilisateur peut rentrer plusieurs occupations, il peut donc cliquer sur "+" et un nouveau champs apparait.

    Malheureusement, je ne parviens pas à faire de l'autocomplétion sur ces nouveaux champs car Jquery ne doit pas intégrer les nouveaux champs occupations[].

    Ma fonction Jquery est la suivante:

    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
    	$('input[name="occupation[]"]').on("keyup", function(){
    		var occup = $(this).val();
    		var currentElement = $(this);		
    		if(occup != ""){ 
    			$.ajax({
    				type: "GET",
    				url: "page_geneoccup.php",
    				data: {"occup":occup},
    				dataType: 'json',
    				success:function(responseData){
    					var liste_occup=responseData; 
    					$(currentElement).autocomplete({
    						source: liste_occup
    					});	
    					return;
    				},
    				error:function(XMLHttpRequest, textStatus, errorThrow){
    					console.log("Error: " + XMLHttpRequest.status + errorThrow );
    					return;
    				}
    			});
    		}
    	});
    Cela fonctionne sur des champs préexistants, mais ayant essayé des créations de champs via JVS (de beaucoup de manière différentes...), l'autocomplétion ne fonctionnait pas sur ces nouveaux champs.



    > Est ce que créer les nouveaux champs via Jquery permettrait de faire fonctionner l'autocomplétion sur les nouveaux champs ?

    > Sinon quelle serait la solution à ce problème ?

    Merci d'avance pour vos lumières

  2. #2
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    294
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2008
    Messages : 294
    Par défaut
    Bonjour,

    Voir ton code html serait pas mal.
    Il faut que tu modifies la liste te permettant de faire de l'autocomplétion aussi lorsque l'utilisateur ajoute un champ, enfin je suis pas sur d'avoir compris ce que tu souhaites faire, c'est pour sa que je veux voir ton code.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    129
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 129
    Par défaut
    Mon code html est surtout en PHP (et assez long), la ligne nous intéressant est des plus simples:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input style="display: inline;" type="text" name="occupation[]">

    ce que je voudrais faire:

    - Je voudrais cloner cette ligne lorsqu'un utilisateur appuie par exemple sur un bouton "+", mais surtout que cette nouvelle ligne soit apte à l'autocomplétion via Jquery. Car je parviens à créer de nouveaux champs en Javascript mais je ne parviens pas à faire de l'autocomplétion sur ces nouveaux champs.


    J'ai lu à diverses reprises que créer les nouvelles champs via Jquery pourrait me faciliter la tâche mais je ne vois pas comment faire.

    Modifier la liste de quoi exactement ?

    Merci beaucoup pour ton aide.

  4. #4
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    294
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2008
    Messages : 294
    Par défaut
    La fonction qui te permet de faire de l'autocomplétion en jquery se lance pour les input ayant comme name occupation, quand tu ajoutes un input, il ne peut pas avoir le même name, du coup la fonction jquery ne se lance pas. Je te conseille d'attribuer une classe à ton input et de modifier le déclenchement de ta fonction jquery en mettant le nom de ta classe.
    Les nouveaux input devront avoir la même classe.

  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 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 659
    Billets dans le blog
    1
    Par défaut
    il suffit juste de relancer un coup d'initialisation d'autocomplete sur el callback de ton ajax .
    Les élément n'existant pas au chargement de la page l'inti de autocomplete ne les a pas affectés ...
    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 !

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    129
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 129
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    il suffit juste de relancer un coup d'initialisation d'autocomplete sur le callback de ton ajax .
    Les éléments n'existant pas au chargement de la page l'inti de autocomplete ne les a pas affectés ...
    Merci beaucoup, c'est exactement ce que je veux faire . Sauf que j'ignore comment... Pourriez-vous m'en dire un peu plus sur l'application ?

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    129
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 129
    Par défaut
    Je vois, mais Jquery pourtant arrive à faire de l'autocomplétion avec ce code si plusieurs champs ont le même noms mais qu'ils ne sont pas créés dynamiquement. C'est plus un tableau de champs. En soi ils n'ont pas vraiment le même nom.

    J'ai reçu une réponse différente qui conserve le tableau de input mais que je ne parviens pas à appliquer

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var initAutoCompleter = function(){
        allInputs = $('input[name="occupation[]"]');
             $(allInputs).each(function(i,oInput){
             $(oInput).off();
             $(oInput).on('keyup',function(){
                var occup = $(oInput).val();
                if(occup){
                   //do your stuff ;)
                }
             });
        });
    };
    It's important to run that function after you add the new Input Element. You could also write a function that allows you to add the eventListeners to only the element you've just added.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var addAutoCompleter = function(newElement){
         newInputs = $(newElement);
         $(newInputs).each(function(i,oInput){
             $(oInput).off();
             $(oInput).on('keyup',function(){
                var occup = $(oInput).val();
     
                if(occup){
                   //do your stuff ;)
                }
             });
         });
    };
    which you can initiate by adding:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(function(){
       addAutoCompleter($('input[name="occupation"]'));
    });
    Cette réponse (brute) me paraît toucher à ce que je veux faire mais ca reste un peu brut de décoffrage pour moi donc je ne sais pas comment mettre cela en place...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Récupérer les valeurs des champs créés dynamiquement
    Par outlawz dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 03/05/2006, 16h32
  2. Gestion séparée de composants créés dynamiquement
    Par anarpunk dans le forum Composants VCL
    Réponses: 8
    Dernier message: 15/06/2005, 10h57
  3. écrire dans un champs généré dynamiquement
    Par scoder dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 08/12/2004, 10h14
  4. Erreur EACCESSVIOLATION avec des compsts créés dynamiquement
    Par tsikpemoise dans le forum Bases de données
    Réponses: 4
    Dernier message: 28/02/2004, 19h05
  5. Comment voir les champs créés dans les tables?
    Par Missvan dans le forum PostgreSQL
    Réponses: 3
    Dernier message: 18/02/2004, 10h27

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