Variable relative à l'élément cliqué

**Raptor92** · 24/10/2018, 15h48

Bonjour

Le code suivant fonctionne et j'arrive à ouvrir une fenêtre modal, le souci concerne le bouton en bout de ligne pour lequel je n'arrive pas à ouvrir le modal avec l'ID qui s'affiche dans l'input à côté.
Cela fonctionne bien avec le bouton au dessus du tableau, mais je n'arrive pas à trouver la solution.
Une aide serait la bienvenue

Merci

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
      <script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <!--Script de récupération & d'envoi des variables -->
      <script>
      function receptionner() {
        var parametres = location.search.substring(1).split("&");
        var login = parametres[0].split("=");
        var pass = parametres[1].split("=");
        var valeur = parametres[2].split("=");
        document.getElementById("valeur").innerHTML = valeur[1];
      }
      </script>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script>
         $(document).ready(function(){
                $('table td').click(function(){
                        var cell = $(this).text();
                     $("#valeur").val(cell); 
                         
                });
         });
      </script>
      </head>
      <body onload="receptionner();">>
      <table>
      <?php $id=$_GET["valeur"] ;
        ?>
            <form  action="#example" method="GET"> 
               <label style="margin-left:120px;">Sélection:</label> 
               <input type="text" name="valeur" id="valeur">
               <input type="hidden" name="login" id="login">             
               <input type="submit"  style="background:#FF8C00;border: 1px solid #FF8C00;color: #000000;" id='submit' name='btn_update' value='Mise à jour' >
                  <!--CODE EN TEST -->
                  <aside id="example" class="modal">
                   <div>
                        <h2>DETAIL DE LA FICHE CONTACT</h2>                   
                        <input type="text" name="valeur1" id="valeur1" value="<?php echo $_GET["valeur"];?>">
                        <!--Champs de la fenêtre modal -->
                        <form method="post" id="insert_form">
                        <?php
                        //connection au serveur
                        // connexion à la base de données                      
                        require 'BDD.php';
                                                        
                        $mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
                        $mysqli->set_charset("utf8");
                                                    
                        $requete = 'SELECT ID,CONT_TYPE,CONT_SOCIAL,CONT_ADR1,CONT_ADR2,CONT_ZIP,CONT_VILLE,CONT_COMMENTS,CONT_CONTACT1,CONT_PHONE1,CONT_MAIL1 FROM CONTACTS WHERE ID='.$id.' ';
                            //var_dump($requete);
                            $resultat = $mysqli->query($requete);
                            while ($ligne = $resultat->fetch_assoc()) {
                                $ID1= $ligne['ID'];
                                $adr1= $ligne['CONT_ADR1'];
                                $adr2= $ligne['CONT_ADR2'];
                                $zip= $ligne['CONT_ZIP'];
                                $ville= $ligne['CONT_VILLE'];
                                $mobile= $ligne['CONT_PHONE1'];
                                $comment= $ligne['CONT_COMMENTS'];
                            }
                            $mysqli->close();
                            ?>
                            <div >
                                <label>ID</label>
                                <input type="text" name="id" id="id" class="form-control" value="<?php echo $ID1;?>" />
                                <br />
                                <label>Adresse</label>
                                <input type="text" name="adr1" id="adr1" class="form-control" value="<?php echo $adr1;?>" />
                                <br />
                                <label>Adresse complémentaire</label>
                                <input type="text" name="adr2" id="adr2" class="form-control" value="<?php echo $adr2;?>"  />
                                <br />  
                                <label>Code Postal</label>
                                <input type="text" name="zip" id="zip" class="form-control" value="<?php echo $zip;?>"   />
                                <br />  
                                <label>Ville</label>
                                <input type="text" name="ville" id="ville" class="form-control" value="<?php echo $ville;?>"  />
                                <br /> 
                                <label>Téléphone</label>
                                <input type="text" name="mobile" id="mobile" class="form-control" value="<?php echo $mobile;?>"  />
                                <br /> 
                                <label>Commentaires</label>
                                <input type="text" name="comment" id="comment" class="form-control" value="<?php echo $comment;?>"  />
                                <br /> 
                                <input type="submit" name="insert" id="insert" value="Valider" class="btn btn-primary" />
                            </div>
                        </form>
                        <!--Fin de mise en page de la fenêtre modal -->
                        <a href="#close" title="Close">Fermer</a>
                  </div>           
                  </aside>          
            </form>
			<form  action="#example" method="POST"> 
			   <input type="submit"style="background:#FF0000;border: 1px solid #FF0000;" id='submit' name='btn_delete' value='Supprimer' >
			</form>
         </table>
 
         <!--FIN DE TEST -->
         <CAPTION>Liste des contacts</caption>
         <br>
         <table id="table1" style=" margin-left:120px;">
            <!-- Destiné à l'envoi des données dans la page de modification UserUpdate.html -->	
            <tr>
               <th>Matricule</th>
               <th>Type</th>
               <th>Raison social</th>
               <th>Adresse</th>
               <th>Adresse complémentaire</th>
               <th>Code postal</th>
               <th>Ville</th>
               <th>Commentaires</th>
               <th>Contact principal</th>
               <th>Téléphone</th>
               <th>Courriel</th>
               <br>
            </tr>
            <?php
  //connection au serveur
  // connexion à la base de données
  
  // Bouton UPDATE en fin de chaque ligne : <td><input type=submit value="Modifier" align=right> 
         
        require 'BDD.php';
                                                                        
        $mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
        $mysqli->set_charset("utf8");
                                                                
        $requete = 'SELECT ID,CONT_TYPE,CONT_SOCIAL,CONT_ADR1,CONT_ADR2,CONT_ZIP,CONT_VILLE,CONT_COMMENTS,CONT_CONTACT1,CONT_PHONE1,CONT_MAIL1 FROM CONTACTS ';
        $resultat = $mysqli->query($requete);
        while ($ligne = $resultat->fetch_assoc()) {
                echo 
                '<tr>
                <td onclick="changeColor(this)">'. $ligne['ID'].'</td>
                <td> '. $ligne['CONT_TYPE'].'</td>
                <td> '.$ligne['CONT_SOCIAL'].'</td>
                <td> '.$ligne['CONT_ADR1'].'</td>
                <td> '.$ligne['CONT_ADR1'].'</td>
                <td> '.$ligne['CONT_ZIP'].'</td>
                <td> '.$ligne['CONT_VILLE'].'</td>
                <td> '.$ligne['CONT_COMMENTS'].'</td>
                <td> '.$ligne['CONT_CONTACT1'].'</td>
                <td> '.$ligne['CONT_PHONE1'].'</td>
                <td> '.$ligne['CONT_MAIL1'].'</td>
    <td><a href="#example" style="color:#000; display:block;width:100px;height:35px;">Détail produit</a>
    <td><input type="text" name="adr1" id="adr1" value="'.$ligne['ID'].'"> 
    <tr>';
                }
    $mysqli->close();
?>
         </table>
         <br>	
 
   </body>
</html>

**javatwister** · 24/10/2018, 15h59

Bonjour

Aurais-tu une page où apparaît ce joli code?

**Raptor92** · 24/10/2018, 16h10

Bonjour

Genre, un exemple ?

**javatwister** · 24/10/2018, 16h20

Envoyé par Raptor92

j'arrive à ouvrir une fenêtre modal, le souci concerne le bouton en bout de ligne pour lequel je n'arrive pas à ouvrir le modal avec l'ID qui s'affiche dans l'input à côté.

C'est cet énoncé qui me gêne un peu;

**SpaceFrog** · 24/10/2018, 16h22

Tu veux dire que tu as un souci de relativité ?

Code :

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

$(this).find( 'référence à ton bouton de ligne ...')

**Raptor92** · 24/10/2018, 16h55

Hello

Sur la pièce jointe, on vois bien les ID de chaque ligne dans l'input, mais en cliquant sur le bouton, je n'affiche en modal que le même ID (le premier en fait)
Alors que dans celui du haut, cela fonctionne parfaitement

Nom : screen.png
Affichages : 167
Taille : 459,5 Ko

Nom : screen.png
Affichages : 167
Taille : 459,5 Ko

**SpaceFrog** · 24/10/2018, 17h05

oui donc du relatif

tu attribues avec jquery le click sur le td ...

donc dans la fonction tu mets la main sur l'element voulu avec un find

teste

Code :

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

console.log ( $(this).find('selecteur de l'element voulu').val() )

Ceci étant je serais curieux de voir le code html généré parce que d'après ce que je vois ta syntaxe de table est à la rue total :

Code :

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

1
2
3
4
5
 
 <table>
      <?php $id=$_GET["valeur"] ;
        ?>
            <form  action="#example" method="GET">

un form direct dans la balise table ? pas de tr pas de td ?

**Toufik83** · 24/10/2018, 17h06

les td de la table (id="table1") sont crées dynamiquement, donc il faut passer par délégation :

Code :

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

1
2
3
4
5
6
 
 $('#table1').on('click','td',function(){//il vaut mieux d'utiliser l'id au lieu de "table".
    var cell = $(this).text();
    $("#valeur").val(cell); 
 
});

tu charges 3 versions de jQuery , une seule devrait suffire, la dernière.

Code html :

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

1
2
3
4
 
<script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

**SpaceFrog** · 24/10/2018, 17h09

heu un id doit être unique ..

**SpaceFrog** · 24/10/2018, 17h33

regarde cet exemple
https://jsfiddle.net/5f0xgc4j/

en cliquant sur chaque ligne ( onclick affecté au tr ) tu affiches en console la valeur de l'input ...

**Raptor92** · 24/10/2018, 21h51

Bonsoir

A force de lire et de chercher, j'ai finis par comprendre que j'avais un <form> mal placé et que cela me générais mon souci
Merci à tous

**SpaceFrog** · 26/10/2018, 08h05

Ceci étant je serais curieux de voir le code html généré parce que d'après ce que je vois ta syntaxe de table est à la rue total :

Variable relative à l'élément cliqué

jQuery

Discussions similaires

Partager

Partager