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 :

Naviguer d'un élément du DOM à un autre avec .next()


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    autodidacte / éternel débutant
    Inscrit en
    Avril 2018
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : autodidacte / éternel débutant

    Informations forums :
    Inscription : Avril 2018
    Messages : 64
    Par défaut Naviguer d'un élément du DOM à un autre avec .next()
    Bonjour,
    J'aimerais récupérer l'id (ou name) d'un select à partir d'un autre élément du DOM, l'input précédent en l'occurence.

    Code html : 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
    24
    25
     
    <fieldset  name="fieldset1">
        <legend>saisie1</legend>
            <label for="nom1">Nom*</label><br />
            <input type='text' id="nom1" name="nom1" />
            <script>fct1('#nom1');</script> //affecte #prenom1
            <br />
            <label for="prenom1">Prénom</label><br />
            <select id="prenom1" name="prenom1" required > 
                <option value="">Sélectionnez un nom ci-dessus</option>
            </select>
            <br />
    </fieldset>
    <fieldset  name="fieldset2">
        <legend>saisie2</legend>
            <label for="nom2">Nom*</label><br />
            <input type='text' id="nom2" name="nom2" />
            <script>fct2('#nom2');</script> // affecte #prenom2
            <br />
            <label for="prenom2">Prénom</label><br />
            <select id="prenom2" name="prenom2" required > 
                <option value="">Sélectionnez un nom ci-dessus</option>
            </select>
            <br />
    </fieldset>
    Pour 'factoriser(?)' fct1 et fct2 (dont seules les valeurs respectives #prenom1 et #prenom2 diffèrent) en une seule fonction fct, j'ai tenté d'obtenir #prenom à partir de #nom pour que fct('#nom') trouve le bon #prenom

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function fct (nom) {
    prenom= $(nom).next().attr('id'); // renvoie la valeur undefined et le type undefined
    ...
    }
    J'ai essayé d'atteindre #prenom depuis #nom de plusieurs façon à partir de cette page de tuto mais, je n'arrive jamais à #prenom.
    exemple :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    $(nom).nextAll().filter(.'input')[0].attr('id')
    Merci de votre aide

  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 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
    Si je comprend bien à partir de nom1 tu veux récupérer prenom1 ?
    Ce qui m'échappe c'est pourquoi vouloir récupérer l'id ???

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function fct (nom) {
    return "pre"+nom;
    }
    si c'est l'élément du DOM que tu veux récupérer

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function fct (nom) {
    $("#pre"+nom);
    }

    Si le but est un operateur de selection relatif :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function fct (nom) {
    prenom= $("#"+nom).closest('select').val(); // renvoie la valeur à condition qu'une option soit sélectionnée...
    }
    Si tu as toujours la correspondance nomx => prenomx
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function fct (nom) {
    prenom= $("#pre"+nom).val();
    ...
    }
    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 !

  3. #3
    Membre confirmé
    Homme Profil pro
    autodidacte / éternel débutant
    Inscrit en
    Avril 2018
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : autodidacte / éternel débutant

    Informations forums :
    Inscription : Avril 2018
    Messages : 64
    Par défaut
    Merci SpaceFrog pour toutes tes propositions (surtout si tu ne vois pas l’intérêt de ma demande ).
    C'est bien l'id et pas la valeur que je cherche à obtenir (cf 3-)

    1 - Je n'avais pas pensé à aller au plus simple : manipuler la chaîne de l'id.
    Ta 1ère proposition devient (j'ai des # qui se baladent)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function fct (nom) {
    return "#pre"+nom.substring(1,nom.lenght);
    }
    Et ça roule.

    2- C'est ta 3eme proposition qui répondrait le mieux à mon besoin
    Citation Envoyé par SpaceFrog
    Si le but est un operateur de selection relatif
    Plus général, et avec l'id et pas la valeur).
    [EDIT] La solution après 3l de café et avoir remis mes lunettes :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    $(nom).nextAll('select');
    Et ça roule aussi.


    Puisque le but est de modifier l'élément select à partir de l'input, aucune option n'est sélectionnée. Donc closest('select') n'est pas définit (j'ai bon?).
    Je pensais utiliser $(':input') trouvé là
    Nom : devnet2.png
Affichages : 140
Taille : 9,9 Ko
    Qu'est-ce qu'il faudrait modifier (syntaxe ? pas possible ?) à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var id_nom = '#nomx';
    $(id_nom).closest(':input').attr('id'); // renvoie #nomx
    pour obtenir #prenomx ?



    3- Quant à l’intérêt d'obtenir l'id, c'est p't'être parce que je ne fais pas les choses comme il faurait ?
    Si veux m'indiquer une autre marche à suivre, je suis preneur
    Le code (très) simplifié
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <input type='text' id="nom1" name="nom1" />
    <script>autocompl('#nom1', Source.php);</script> //affecte #prenom1
    <br />
    <label for="prenom1">Prénom</label><br />
    <select id="prenom1" name="prenom1" required >

    Code js : 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
    24
    25
    26
    27
     
    function autocompl(champ, Source){
        $(champ).autocomplete({
        source : Source,
        minLength : 2,
        select : function(event, ui){
               $(champ).val(ui.item.label); //forcer l'affichage de ui.item.label dans l'input
               majList (champ); // à la place de majList1 (ui.item.label) ou majList2 (ui.item.label};
               return false;
                    }
        });
    }
    function majList (champ) {
        var nom = $(champ).val();
        // var champsuivant = "#pre"+champ.substring(1,champ.lenght);   // trouvé gràce à toi en 1
        var champsuivant = $(Champ).nextAll('select');                                    // c'est ça que je voulais !
        $.ajax(
            {
            type:'POST',
            url:'ajax.php',
            data:'lbl_nom='+nom, 
            success:function(html)                   
                    {
                    $(champsuivant).html(html); 
                    }
                }); 
        }
    P.s. j'attends un peu avant de marquer résolu, des fois qu'une suggestion arrivait à propos de 3 -

  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 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
    en relatif personnellement j'utilise plutôt moins gourmand que
    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 !

  5. #5
    Membre confirmé
    Homme Profil pro
    autodidacte / éternel débutant
    Inscrit en
    Avril 2018
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Corrèze (Limousin)

    Informations professionnelles :
    Activité : autodidacte / éternel débutant

    Informations forums :
    Inscription : Avril 2018
    Messages : 64
    Par défaut
    Euh...
    .closest(), me renvoie vers les parents (fieldset ou form), quels que soient les sélecteurs en argument.
    Et c'est aussi ce que j'avais compris ici :
    Nom : devnet.png
Affichages : 124
Taille : 7,8 Ko

    Je m'en sers mal?

    Sinon,
    moins gourmand que
    .closest() ne renvoie/recherche qu'un élément alors que .nextAll() en renvoie/recherche plusieurs? c'est ça ?
    Je n'arrive pas à faire fonctionner .next()...
    J'ai bien .siblings('select'), mais ça doit être aussi gourmand que .nextAll() ?

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 520
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 520
    Par défaut
    Bonjour,

    $.next() n'est pas la bonne solution pour ce cas, c'est $.siblings que tu dois utiliser afin d'arriver à ton select à partir d'un élément voisin.

    Puis je ne vois pas pourquoi tu mets des balises <script> dans le code html, il fallait plutôt mettre ton code js dans la partie <head> et le tout dans $(document).ready().

    Supprime les <script> de ton code html et utilise ceci :

    Avec siblings :
    Code html : 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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8" />
     
        <script>
            function fct(nom) {
               let prenom;
               $(nom).each(function(){
                  prenom=$(this)
                 .siblings('select')//récupère le voisin <select>
                 .attr('id');
                 console.log( prenom);
              });
            }
           
           $(document).ready(function(){
               fct("#nom1,#nom2");//factoriser les deux inputs
           });
       </script>
    </head>
    <body><!--Ton code html --></body>
    </html>

    Avec next ():
    Code html : 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
    24
    25
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8" />
     
        <script>
             function fct(nom) {
                 let prenom;
                $(nom).each(function(){
                    prenom=$(this)
                  .next()//pour le 1er <br />
                  .next('label')//pour le label
                  .next('br')//encore une fois le <br />
                  .next('select')//enfin le <select>
                  .attr('id');
                  console.log( prenom);
              });
           }
           $(document).ready(function(){
              fct("#nom1,#nom2");//factoriser les deux inputs
           });
       </script>
    </head>
    <body><!--Ton code html --></body>
    </html>

    Sinon si tu veux gérer l'auto-complétion de tous les inputs #nomX, tu peux utiliser seulement une fonction et passer le mot clé this en paramètre à l'appelle de majList dans select : ( et toujours dans le <head> et dans le même $(document).ready ) :

    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
    24
    25
    26
    27
    28
    29
    function majList (input) {
        var nom = $(input).val();
        var champsuivant = $(input).siblings('select');  
        console.log('majList :',nom,champsuivant.attr('id'));//affiche les valeurs de nom et le id du champsuivant dans la console 
        $.ajax({
            type:'POST',
            url:"ajax.php",
            data:'lbl_nom='+nom, 
            success:function(html) {
                  $(champsuivant).html(html); 
            },
            error:function(err){//il faut toujours utiliser error ou fail !
                alert("Erreur majList :"+err);
            }  
        });
    }
    $(document).ready(function(){
            //autre code js...
             $('#nom1,#nom2').autocomplete({//séparer #nom1 et #nom2 par une virgule.
                 source : "Source.php",
                 minLength : 2,
                 select : function(event, ui){
                     console.log('this :',this); //this ici vaut l'input sur lequel on clique pour choisir dans sa liste des suggestions (soit #nom1 ou #nom2)
                     $(this).val(ui.item.label); 
                     majList(this);//utiliser this
                     return false;
                }
            });
    });

    Ou bien sans aucun paramètre dans majList() et utiliser call avec le contexte this :
    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
    function majList () {
        var nom = $(this).val();
        var champsuivant = $(this).siblings('select');  
        console.log('majList :',nom,champsuivant.attr('id'));//affiche les valeurs de nom et le id du champsuivant dans la console 
        $.ajax(.....);
    }
    $(document).ready(function(){
        $('#nom1,#nom2').autocomplete({
             ......,
             select:function(event,ui){
                  $(this).val(ui.item.label);  
                  majList.call(this); //appeler majList avec le contexte "this" lors du select
                  return false;
             }
        });
    });

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

Discussions similaires

  1. [DOM] insertion d'une balise dans une autre avec DOM
    Par sebus dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 07/03/2007, 00h16
  2. [POO & DOM] programation js par enrichissement des éléments du DOM
    Par sekaijin dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 07/01/2007, 15h25
  3. [CSS]positionnement d'un élément par rapport à un autre
    Par deldin dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/07/2006, 11h21
  4. [HTML]Positionner un élément par rapport à un autre
    Par Samanta dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 03/03/2006, 17h53
  5. [jcombobox]l'élément affiché lié à un autre objet
    Par szdavid dans le forum Composants
    Réponses: 3
    Dernier message: 11/05/2004, 10h17

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