11521 sujets

JavaScript, DOM et API Web HTML5

Click sur un lien avec JQuery

Bonjour,
J'ai une div de id=tabAffiche : Le contenu de cette div est chargé dynamiquement et contient un tableau de départements qui est issue du fichier dep.php

Je voudrais que lorsque je clique sur le bouton modifier qu'il ramène le contenu de la ligne dans le champ input de mon formulaire.

<!DOCTYPE HTML>
<html>
<head>
 <title>Fiche de saisie</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="css/style.css">

 <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
 <script type="text/javascript" src="js/validation.js"></script>
</head>
<body>
 <div id="frm">
  <form method="POST"  id="formDep" onsubmit="return false;">
   <fieldset>
    <legend>Informations</legend>
     <div class="input">
      <label>Libellé département</label>
      <input type="text" name="dep" id="dep">
      <span id="infodep"></span>
     </div>

     <div class="action">
      <input type="submit" value="Enregistrer" id="save">
     </div>
   </fieldset>
  </form>
 </div>
 <div id="tabAffiche"> </div>
</body>
</html>


Voici le code [/contents/1351-php-introduction php] qui rempli la div:
dep.php


<?php require('config.php');?>
<?php

 $req = "SELECT * FROM departement";
 $resultat = $bdd->query($req);
?>

<table class="tab1">
 <tr>
   <th>Code</th>
   <th>Département</th>
   <th colspan="2">Actions</th>
 </tr>
 <?php while ($donnees = $resultat->fetch()) {?>
  <tr>
   <td><?php echo $donnees['code_dep']; ?></td>
   <td><?php echo $donnees['libelle_dep']; ?></td>
   <td><a href="SaisieDep.html" class="load" rel="<?php echo($donnees['code_dep'])?>">Modifier</a></td>
   <td><a href="supprimerDep.php?code_dep=<?php echo($donnees['code_dep'])?>">Supprimer</a></td>
  </tr>
<?php
 }
?>
</table>


Grâce à JQuery je vais lancer une requête [/contents/5-ajax-asynchronous-javascript-and-xml dep.php

function chargerDep(){
 $.get('dep.php', function(reponse){
  $("#tabAffiche").html(reponse);
 });
}



Je voudrai grâce à JQuery déclencher l'événement [/download/telecharger-34085027-click click] sur le bouton modifier afin d'afficher le contenu de la ligne dans le champ input du formulaire.
J'ai essayer mais je crois que je confronter à un problème d'hiérarchie d'éléments que je n'arrive pas à résoudre.

Voici que j'ai fait mais qui ne marche pas quand le tableau est en mémoire

$("#tabAffiche table.tab1 a.load").click(function() {
    $("#dep).val("Test Valeur à modifier");
     return false;
   });*/


Code complet de la page

<html><head>
 <title>Fiche de saisie</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="css/style.css">

 <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
 <script type="text/javascript" src="js/validation.js"></script>
</head>
<body>
 <div id="frm">
  <form method="POST" id="formDep" onsubmit="return false;">
   <fieldset>
    <legend>Informations</legend>
     <div class="input">
      <label>Libellé département</label>
      <input name="dep" id="dep" type="text">
      <span id="infodep"></span>
     </div>

     <div class="action">
      <input value="Enregistrer" id="save" type="submit">
     </div>
   </fieldset>
  </form>
 </div>
 <div id="tabAffiche">

<table class="tab1">
 <tbody><tr>
   <th>Code</th>
   <th>Département</th>
   <th colspan="2">Actions</th>
 </tr>
   <tr>
   <td>1</td>
   <td>[/contents/506-informatique Informatique]</td>
   <td><a href="SaisieDep.html" class="load" rel="1">Modifier</a></td>
   <td><a href="supprimerDep.php?code_dep=1">Supprimer</a></td>
  </tr>
  <tr>
   <td>2</td>
   <td>Mathematique</td>
   <td><a href="SaisieDep.html" class="load" rel="2">Modifier</a></td>
   <td><a href="supprimerDep.php?code_dep=2">Supprimer</a></td>
  </tr>
  <tr>
   <td>3</td>
   <td>Physique</td>
   <td><a href="SaisieDep.html" class="load" rel="3">Modifier</a></td>
   <td><a href="supprimerDep.php?code_dep=3">Supprimer</a></td>
  </tr>
  <tr>
   <td>10</td>
   <td>Lettres</td>
   <td><a href="SaisieDep.html" class="load" rel="10">Modifier</a></td>
   <td><a href="supprimerDep.php?code_dep=10">Supprimer</a></td>
  </tr>
  <tr>
   <td>11</td>
   <td>Recherche et Innovation</td>
   <td><a href="SaisieDep.html" class="load" rel="11">Modifier</a></td>
   <td><a href="supprimerDep.php?code_dep=11">Supprimer</a></td>
  </tr>
</tbody></table></div>

</body></html>



Je crois que le problème vient du fait que c'est un tableau en mémoire (construit dynamiquement).

Car quand je copie le code final général dans une autre page que j'enregistre (les valeurs du tableaux sont maintenant fixe et non en mémoire) mon code JQuery de click sur modifier fonctionne bien.

Comment donc déclencher un click sur le lien modifier de n'importe quelle ligne du tableau en JQuery ?

Merci pour vos suggestions.
<config>Windows 7 / Firefox 38.0</config>

<signature>
anc</signature>
Modifié par aristideman (17 Jun 2015 - 17:31)
Bonjour,

Peux-tu mettre ton code dans les balises prévus à cet effet s'il te plait. Parce qu'en terme de lisibilité c'est compliqué sinon. Merci d'avance. Smiley smile
Et même si tu pouvais nous donner un lien jsfiddle pour tester ça serait encore mieux.
Ton jquery doit être construit de cette manière pour simuler un click sur un td 


 $("#tabAffiche ").on("click", "td", function() {
     alert($( this ).text());
   });

Modifié par JENCAL (18 Jun 2015 - 11:20)
Sujet clos
Aller à