Interaction avec éléments créés en Ajax.

**Pfaal** · 17/05/2013, 11h35

Bonjour,

1- EXPLICATION DU PROJET

Tout d'abord, je vous explique dans les grandes lignes ce que je cherche à réaliser. En très résumé, il s'agit d'un Excell extra light : un tableau avec des données stockées sur le serveur. Ce tableau doit pouvoir être classé par colonne, des colonnes doivent pouvoir être masquées et l'utilisateur doit pouvoir modifier le contenu des cases et ajouter une ligne dans le tableau.

Pour faire simple, le tri et le masque d'une colonne se passe en Ajax : cela déclenche une requête qui rappelle toutes les données et les ORDER BY correctement. Mon Ajax fait ensuite un .html(retours) qui écrase les données du tableau.

Bon, jusqu'ici tout se passait pas trop mal. Mais je commence à me pencher sur la modification et voilà, le hic !

2- EXPLICATION DU PROBLEME

"Ca marche pas !" ou plus en détail :

La manipulation : quand je clique sur un input de mon tableau, je veux une alert("test").

Le problème : ce test simplissime se déroule bien quand la page est chargée une première fois. Mais quand je tri ou que je masque une colonne, mon input cliqué ne retourne plus aucune alerte.

Les essais : J'ai mis un input de côté qui n'est pas touché par l'ajax. Mon alert fonctionne toujours sur lui. Si je le modifie en JS, même en copié-collé, il ne fonctionne plus. Je me demande donc, est-ce possible d'interagir avec des éléments créés en ajax ?

3- EXTRAITS DE CODE

Le JS :

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
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
$(document).ready( function() {
 
	$("#contextmenu").hide();
 
	$("#tableau .titre .col").click(function(e) {
 
		  var colid = this.id.substring(4,5);
		  var colname = $(this).text();
		  if ( $(this).hasClass("masque") ) { var masque = '<a id="masqueur" href="#">Afficher</a>'; } else { var masque = '<a id="masqueur" href="#">Masquer</a>'; }
 
		  $("#contextmenu").css({
			  top: e.pageY+2,
			  left: e.pageX+2
		  })
		  $("#contextmenu").stop().fadeTo(200,1);
 
		  $("#contextmenu").html(
		    '<h5>'+colname+'</h5>'+masque+'<a id="oc" href="#">Tri croissant</a><a id="od" href="#">Tri décroissant</a>'
		  )
 
		  $("#masqueur").click(function() {
		    if ( $("#colo"+colid).hasClass("masque") )
			{
				$("#colo"+colid).removeClass("masque");
				$.ajax({
				  type: "POST",
				  url: "maj_pref.php",
				  data: { genre: "mas", value: "1", col: colid }
				}).done(function( texte ) {
				  $.ajax({
					type: "POST",
					url: "recup_rdv.php"
				  }).done(function( texte ) {
					$(".inner-table").html(texte);
					$("#contextmenu").hide();
					});
				  });
			}
		    else
			{
				$("#colo"+colid).addClass("masque");
				$("#contextmenu").hide();
				$.ajax({
				  type: "POST",
				  url: "maj_pref.php",
				  data: { genre: "mas", value: "0", col: colid },
				  }).done(function( texte ) {
				  $.ajax({
					type: "POST",
					url: "recup_rdv.php"
				  }).done(function( texte ) {
					$(".inner-table").html(texte);
					$("#contextmenu").hide();
					});
				  });
			}
		  });
 
		  $("#oc").click(function() {
			$.ajax({
			  type: "POST",
			  url: "maj_pref.php",
			  data: { genre: "cla", ordre: "ASC", col: colid }
			}).done(function( texte ) {
			  $.ajax({
				type: "POST",
				url: "recup_rdv.php"
			  }).done(function( texte ) {
				$(".inner-table").html(texte);
				$("#contextmenu").hide();
				});
			  });
		  });
 
		  $("#od").click(function() {
			$.ajax({
			  type: "POST",
			  url: "maj_pref.php",
			  data: { genre: "cla", ordre: "DESC", col: colid }
			})
			$.ajax({
			  type: "POST",
			  url: "recup_rdv.php"
			})
			.done(function(texte) {
			  $(".inner-table").html(texte);
			  $(".return").html('<input type="text" id="statut" name="statut" value="input indépendant" />');
			  $("#contextmenu").hide();
			});
		  });
	});
 
	$("input").click(function() {
	  //var inpid = this.name;
	  //var formid = this.form.id;
	  //var chval = this.value;
	  ///// FOCUS TOP
	  alert('clicked');
	  ///// SAUVEGARDE AUTO
	});
 
});

HTML + PhP

Code php :

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
<body>
 
<div id="contextmenu">
</div>
 
<div id="tableau">
  <?php
  function addmasque($masque)
  {
	  $sql_col = array ( 
		  "1" => "PREF_DATE_SHOW", 
		  "2" => "PREF_NOM_SHOW", 
		  "3" => "PREF_MAIL_SHOW",
		  "4" => "PREF_TEL_SHOW", 
		  "5" => "PREF_DPT_SHOW", 
		  "6" => "PREF_OBJ_SHOW",
		  "7" => "PREF_TYPE_SHOW",
		  "8" => "PREF_STATUT_SHOW",
	  );
	  $verif = $sql_col[$masque];
	  $pref = " SELECT * FROM RDV_PREF WHERE PREF_USE_ID = 1 ";
	  $p = mysql_query($pref);
	  $pref = mysql_fetch_object($p);
	  if($pref->$verif == 0) { $addmasque = " masque"; } else { $addmasque = ""; }
	  return $addmasque;
  }
  ?>
  <div class="ligne titre">
    <div class="col col1<?php echo addmasque("1"); ?>" id="colo1">date</div>
    <div class="col col2<?php echo addmasque("2"); ?>" id="colo2">nom</div>
    <div class="col col3<?php echo addmasque("3"); ?>" id="colo3">mail</div>
    <div class="col col4<?php echo addmasque("4"); ?>" id="colo4">tel</div>
    <div class="col col5<?php echo addmasque("5"); ?>" id="colo5">dpt</div>
    <div class="col col6<?php echo addmasque("6"); ?>" id="colo6">objectif</div>
    <div class="col col7<?php echo addmasque("7"); ?>" id="colo7">type</div>
    <div class="col col8<?php echo addmasque("8"); ?>" id="colo8">statut</div>
  </div>
  <div class="clear"></div>
  <span class="inner-table">
  <?php
  function order($col)
  {
	  $classement = array ( 
		  "1" => "ORDER BY CLI_DATE_AJOUT", 
		  "2" => "ORDER BY CLI_NOM", 
		  "3" => "ORDER BY CLI_MAIL",
		  "4" => "ORDER BY CLI_TEL", 
		  "5" => "ORDER BY CLI_DPT", 
		  "6" => "ORDER BY CLI_OBJ",
		  "7" => "ORDER BY CLI_TYPE"
	  );
	  return $classement[$col];
  }
  $ordre = " SELECT PREF_ORD_COL, PREF_ORD_SORT FROM RDV_PREF WHERE PREF_USE_ID = 1 ";
  $o = mysql_query($ordre);
  $pref = mysql_fetch_object($o);
  $ordre = order($pref->PREF_ORD_COL);
  $var_ordre = $ordre." ".$pref->PREF_ORD_SORT;
 
  $query = " SELECT * FROM RDV_CLIENT WHERE CLI_GENRE = 1 ".$var_ordre." ";
  $q = mysql_query($query);
  while($row = mysql_fetch_object($q))
  {
  ?>
  <div class="ligne">
    <form id="rdv<?php echo $row->CLI_ID; ?>">
    <div class="col col1<?php echo addmasque("1"); ?>">
      <input type="text" id="date" name="date" value="<?php echo $row->CLI_DATE_AJOUT; ?>" />
    </div>
    <div class="col col2<?php echo addmasque("2"); ?>">
      <input type="text" id="nom" name="nom" value="<?php echo $row->CLI_NOM; ?>" />
    </div>
    <div class="col col3<?php echo addmasque("3"); ?>">
      <input type="text" id="mail" name="mail" value="<?php echo $row->CLI_MAIL; ?>" />
    </div>
    <div class="col col4<?php echo addmasque("4"); ?>">
      <input type="text" id="tel" name="tel" value="<?php echo $row->CLI_TEL; ?>" />
    </div>
    <div class="col col5<?php echo addmasque("5"); ?>">
      <input type="text" id="dpt" name="dpt" value="<?php echo $row->CLI_DPT; ?>" />
    </div>
    <div class="col col6<?php echo addmasque("6"); ?>">
      <input type="text" id="obj" name="obj" value="<?php echo $row->CLI_OBJ; ?>" />
    </div>
    <div class="col col7<?php echo addmasque("7"); ?>">
      <input type="text" id="type" name="type" value="<?php echo $row->CLI_TYPE; ?>" />
    </div>
    <div class="col col8<?php echo addmasque("8"); ?>">
      <input type="text" id="statut" name="statut" value="<?php echo $row->CLI_STATUT; ?>" />
    </div>
    </form>
  <div class="clear"></div>
  </div>
  <?php
  }
  ?>
  </span>
 
</div>
 
<div class="return">
<input type="text" id="statut" name="statut" value="input indépendant" />
</div>
 
 
</body>

En espérant avoir été assez clair, je vous remercie pour vos retours.

**Bovino** · 17/05/2013, 11h43

Regarde du côté de la délégation d'événement : .on()

**SpaceFrog** · 17/05/2013, 11h45

ou delegate() ...

**Pfaal** · 17/05/2013, 12h11

Déjà, merci pour les pistes. Même si je n'ai pas tout compris, j'ai remplacer :

Code :

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

1
2
3
4
5
6
7
8
9
 
$("input").click(function() {
  //var inpid = this.name;
  //var formid = this.form.id;
  //var chval = this.value;
  ///// FOCUS TOP
  alert('clicked');
  ///// SAUVEGARDE AUTO
});

par

Code :

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

1
2
3
4
5
6
7
8
9
 
$(document).delegate("input", "click", function() {
  //var inpid = this.name;
  //var formid = this.form.id;
  //var chval = this.value;
  ///// FOCUS TOP
  alert('clicked');
  ///// SAUVEGARDE AUTO
});

Et je retrouve mes events alert. Bon, j'ai lu les documentations en diagonales, va falloir que je me penche sérieusement dessus, parce que même si le résultat à l'air fonctionnel, je suis forcé d'avouer que je ne comprend ABSOLUMENT pas la mécanique pour le coup !

**royto** · 19/05/2013, 18h53

petite précision, depuis la version 1.7 de jquery, il faut mieux utiliser on() qui gère maintenant les événements. delegate() ne fait maintenant au appeler on() donc autant utiliser on().

Interaction avec éléments créés en Ajax.

jQuery

Vue hybride

Discussions similaires

Partager

Partager