Discussion :

[ClayStone]

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

[SpaceFrog]

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();
...
}

[ClayStone]

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

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 -

[SpaceFrog]

en relatif personnellement j'utilise plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.closest()

moins gourmand que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.nextAll()

[ClayStone]

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() ?

[Toufik83]

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;
         }
    });
});

[ClayStone]

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)

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 :

c'est p't'être parce que je ne fais pas les choses comme il faudrait ?

[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é.

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">.

[ClayStone]

@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

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.

... 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.

[Toufik83]

Bonjour,

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>.

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...).

[ClayStone]

Merci à vous deux pour vos propositions et explications