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

  1. #1
    Nouveau membre du Club
    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

    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 !

    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 membre du Club
    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à

    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

    en relatif personnellement j'utilise plutôt
    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
    Nouveau membre du Club
    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 :

    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
    Membre émérite
    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;
             }
        });
    });

  7. #7
    Nouveau membre du Club
    Wow ! Merci Toufik ! Ça c'est un coup de main !
    Je regarde tout ça et je reviens (ma cafetière ne va pas te dire merci)

    Citation Envoyé par Toufik83
    Puis je ne vois pas pourquoi tu mets des balises <script> dans le code html
    Moi non plus .
    Enfin si, j'en ai bien une petite idée :
    Citation Envoyé par ClayStone #3
    c'est p't'être parce que je ne fais pas les choses comme il faudrait ?

  8. #8
    Membre émérite
    J'ai oublié un truc très important, c'est que l'ajax doit envoyer le ID du nom sélectionné et pas la valeur, car il pourrait bien y avoir plusieurs utilisateurs avec le même nom sélectionné.

    Ce qui signifie que ta démarche n'est pas toute à fait propre, car on peut par exemple taper "Craig" comme nom alors qu'ils existent plusieurs "Craig" dans la base de donnée, tu ne sauras pas qui c'est...

    A mon avis tu n'as même pas besoin de ajax pour atteindre le résultat voulu, pourquoi ne pas afficher le nom ET le prénom dans la liste déroulante, puis lorsqu'on sélectionne une personne tu fais un split(" ") sur la chaîne pour récupérer un tableau ["nom","prénom"] et là tu n'as qu'à utiliser les indexes 0 et 1 du tableau pour remplir le <input id="nomX" /> et le <select id="prenomX">.

  9. #9
    Nouveau membre du Club
    @Toufik83

    Ton post #6
    - C'est ta dernière proposition que j'ai retenue. C'est parfait. Merci pour l'outil this, le .call() et l'argument double "#nom1,#nom2" (je sais pas comment on dit).

    - Après lecture de la doc sur $(document).ready, j'en comprends l'utilité, pas trop le fonctionnement.
    Faut-il donc y placer tous les scripts js qui sont déclenchés par les éléments du DOM ou qui les modifient ?
    Peut-on le placer dans un fichier functions.js et appeler ce fichier dans le head?
    (le dév., c'est un métier! moi j'apprends sur le tas...)

    Ton post #8
    Citation Envoyé par Toufik83
    J'ai oublié un truc très important, c'est que l'ajax doit envoyer le ID du nom sélectionné et pas la valeur, car il pourrait bien y avoir plusieurs utilisateurs avec le même nom sélectionné.
    ...
    pourquoi ne pas afficher le nom ET le prénom dans la liste déroulante, puis lorsqu'on sélectionne une personne tu fais un split(" ") sur la chaîne pour récupérer un tableau ["nom","prénom"] et là tu n'as qu'à utiliser les indexes 0 et 1 du tableau pour remplir le <input id="nomX" /> et le <select id="prenomX">.
    Merci pour l'avertissement, mais, en fait, les noms et prénoms sont dans la même table, et ils sont accompagnés de critères supplémentaires (pour éviter de confondre deux Daniel Craig).
    L'id unique d'une personne est retournée par les <select id="prenomx"> (qui affichent le prénom ET les critères supplémentaires). C'est cet id que j'exploite après pour remplir x autres tables.
    Les filtres $.autocomplete() puis majLis()t sur les noms ne servent qu'à éviter des listes de plusieurs centaines d'identités pour beaucoup moins (mais beaucoup trop pour un <select >) de noms de famille.

    Citation Envoyé par Toufik83
    ... un split(" ") sur la chaîne pour récupérer un tableau ["nom","prénom"] et là tu n'as qu'à utiliser les indexes 0 et 1 du tableau pour remplir le <input id="nomX" /> et le <select id="prenomX">
    Ça en revanche, je le garde sous le coude, ça va bien m'aider ailleurs.

  10. #10
    Membre émérite
    Bonjour,

    Citation Envoyé par ClayStone
    Faut-il donc y placer tous les scripts js qui sont déclenchés par les éléments du DOM ou qui les modifient ?
    .

    Oui, il faut mettre toutes les instructions js dans une seule fonction $(document).ready() et dans la balise <head>.

    Citation Envoyé par ClayStone

    Peut-on le placer dans un fichier functions.js et appeler ce fichier dans le head?
    Oui, c'est bien possible, et ce fichier doit aussi englober le code dans un $(document).ready().

    En gros, document ready de jQuery est l'équivalente de DOMContentLoaded en javascript pur, et le code ne sera pas évaluer qu'après que le document est bien chargé et analysé (css,js,html...).

  11. #11
    Nouveau membre du Club
    Merci à vous deux pour vos propositions et explications

###raw>template_hook.ano_emploi###