Remplacer une fonction d'un ondblclick

**bastian06n** · 08/08/2010, 23h52

Bonjour, j'ai une ligne de tableau

Code :

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

<tr ondblclick="displaySubline(<?php echo $row['id_news'];?>);">...</tr>

dans ma fonction displaySubline j'utilise AJAX pour ajouter d'autre ligne juste apres celle où l'on a doubleclické dessus.

et a la fin de cette fonction j'ai fait ce code:

Code :

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

$('#tablenut tr:#news_'+line).attr('ondblclick', alert('coucou'));

Qui est sensé trouvé ma ligne dans mon tableau (tablenut) et lui changer le doubleclick sauf que ce code est directement interpreté lors de l'apel de displaySubline...
Le but étant que quand on doubleclick sur cette ligne elle affiche des infos dans des tr en dessous et quand on reclick dessus elle retire les tr qu'elle a ajouté (donc a la place de alert('coucou') j'aurai du code jquery pour delete les tr créé

Comment faire pour que le changement d'attribut du doubleclick fonctionne ? :p

Quelqu'un pourrait il m'aider? Merci.

**bastian06n** · 09/08/2010, 00h05

J'ai trouvé,
j'ai remplacer ma ligne de code jQuery de changement d'attribut par:

Code :

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

1
2
3
4
$('#tablenut tr:#news_'+line).removeAttr( 'ondblclick' );
	$('#tablenut tr:#news_'+line).dblclick(function() {
		alert('Handler for .dblclick() called.');
	});

**danielhagnoul** · 09/08/2010, 00h35

Bonsoir

Code :

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

1
2
3
4
5
6
7
8
9
10
/*
 * Comme un ID doit être unique, c'est
 * une référence solide et univoque à lui seul.
 *
 * Nota Bene : le double clic n'est pas géré
 * de la même manière par tous les navigateurs
 */
$("#news_" + line).dblclick(function(){
	alert('Handler for .dblclick() called.');
});

**bastian06n** · 09/08/2010, 00h49

Bonsoir danielhagnoul,
Merci pour la précision des id, cela dis effectivement ce code ne fonctionne pas sous IE ... il lance tout les évènements en même temps :'(

**danielhagnoul** · 09/08/2010, 00h55

Oui, c'est la raison pour laquelle on utilise click() ou d'autres événements , http://api.jquery.com/category/events/, et que l'on n'utilise pratiquement jamais le dblclick().

**bastian06n** · 09/08/2010, 01h10

Je viens d'essayer de remplacer tout mes ondblclick et dblclick par des onclick et click mais rien à faire ca fait exactement la même chose sous IE il lance tout.

**danielhagnoul** · 09/08/2010, 01h18

Bonsoir

Cela paraît logique, si on y réfléchit bien.

Il est impossible de vous aider sans quelques explications et surtout le code : CSS, HTML, JS. Pas de code serveur sur ce forum, vous devez copier le code tel qu'il apparaît dans votre navigateur.

Mais en ce qui me concerne, ce sera pour demain.

**bastian06n** · 09/08/2010, 01h47

hehe bonne nuit

Alors en faite je veux que quand je click sur la ligne du tableau qui correspond concrètement à une news cela affiche les commentaires qui lui sont liés en ajoutant des lignes de tableau (<tr></tr>).Le code html est renvoyé par un echo de la page de script php pour l'interrogation de la bdd)
voila mes 2 fonctions JS (la première fonctionne plutôt bien sous Firefox, mais sous IE il ne remplace pas le onlick.
Ensuite une fois les lignes créées je veux que: lorsque l'on click une nouvelle fois sur la ligne de la news cela supprime (ou cache) tout les lignes créées.
Pour la deuxieme fonction je pense pas qu'elle fonction car mysql_fetch_assoc est sensé me retourner un tableau et lorsque je le parcours avec le JS il trouve des trucs bizarres
Mais je crois que je vais ajouter une class à chaque ligne créée dans le script php et avec jQuery je le passerai en display: none ca sera plus simple pour moi puis se sera plus rapide lors du rechargement je pense.
Donc les 2 fonctions 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
function displaySubline (line) {
	//On affiche la zone de notification de chargement
	$('#cache').css({ visibility: 'visible', display: 'block', position: 'fixed' });
	//envoie des donées vers le php
	$(document).ready(function () {
		//connexion au script php
		$.post("dashboard/test.php", { id: line, display: 'y' },
		function success(data){
			//on ajoute ce que le script à retourné
			$('#news_'+line).after(data);
 
			//tout c'est bien passé alors on retire la zone de chargement
			$('#cache').css({ visibility: 'hidden', display: 'none'});
			//alert(data);
			//on change l'element ondbclick
			$('#news_'+line).removeAttr( 'onclick' );
 
		});
		$('#news_'+line).click(function() {
				UndisplaySubline(line);
			});
	});	
 
}
function UndisplaySubline(line){
	//On affiche la zone de notification de chargement
	$('#cache').css({ visibility: 'visible', display: 'block', position: 'fixed' });
	//envoie des donées vers le php
	$(document).ready(function () {
		//connexion au script php
		$.post("dashboard/test.php", { id: line, display: 'n' },
		function success(data){
			var x = data;
			// on supprime les ligne de com
			for(var i= 0; i < x.length; i++){
				$('#com_'+x[i]).remove();
			}
			//tout c'est bien passé alors on retire la zone de chargement
			$('#cache').css({ visibility: 'hidden', display: 'none'});
			alert(data+' '+line);
			//on change l'element ondbclick
			$('#news_'+line).removeAttr( 'onclick' );
 
		});
		$('#news_'+line).click(function() {
				displaySubline(line);
 
			});
	});	
 
}

et mon code HTML avant l'envoi AJAX

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
<table cellspacing="0" cellpadding="0" id="tablenut">
	<tbody>
		<tr id="table_entete">
			<td>ID</td>
			<td>Titre</td>
			<td>Auteur</td>
			<td>Date</td>
			<td>Action</td>
		</tr>
		<tr bgcolor="lightblue" class="org" id="news_6" onclick="displaySubline(6);">
			<td>6</td>
			<td>Lorem ipsum TEST</td>
			<td>Maurin</td>
			<td>2010-07-09</td>
			<td style="padding-top: 4px;">
				<!-- édition des commentaires -->
				<a href="index.php?file=10&amp;edit_news_comments=6">	
					<img border="none" title="Edition des commentaires" src="dashboard/images/comment.gif">
				</a>
				<!-- édition des news -->
				<a href="index.php?file=10&amp;edit_news=6">
					<img border="none" title="Editer la News" src="dashboard/images/page_edit.gif">
				</a>
				<!-- suppression des news -->
				<a href="index.php?file=10&amp;suppr_news=6" onclick="return areyousure();">	
					<img border="none" title="Supprimer la News" src="dashboard/images/page_delete.gif">
				</a>
			</td>
		</tr>
		<tr bgcolor="lightgreen" class="org" id="news_7" onclick="displaySubline(7);">
			<td>7</td>
			<td>Lorem ipsum</td>
			<td>Bastian</td>
			<td>2010-07-10</td>
			<td style="padding-top: 4px;">
				<!-- édition des commentaires -->
				<a href="index.php?file=10&amp;edit_news_comments=7">	
					<img border="none" title="Edition des commentaires" src="dashboard/images/comment.gif">
				</a>
				<!-- édition des news -->
				<a href="index.php?file=10&amp;edit_news=7">
					<img border="none" title="Editer la News" src="dashboard/images/page_edit.gif">
				</a>
				<!-- suppression des news -->
				<a href="index.php?file=10&amp;suppr_news=7" onclick="return areyousure();">	
					<img border="none" title="Supprimer la News" src="dashboard/images/page_delete.gif">
				</a>
			</td>
		</tr>
	</tbody>
</table>

Le code HTML apres le premier click:

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
<table cellspacing="0" cellpadding="0" id="tablenut">
	<tbody>
		<tr id="table_entete">
			<td>ID</td>
			<td>Titre</td>
			<td>Auteur</td>
			<td>Date</td>
			<td>Action</td>
		</tr>
		<tr bgcolor="lightblue" class="org" id="news_6" onclick="displaySubline(6);">
			<td>6</td>
			<td>Lorem ipsum TEST</td>
			<td>Maurin</td>
			<td>2010-07-09</td>
			<td style="padding-top: 4px;">
				<!-- édition des commentaires -->
				<a href="index.php?file=10&amp;edit_news_comments=6">	
					<img border="none" title="Edition des commentaires" src="dashboard/images/comment.gif">
				</a>
				<!-- édition des news -->
				<a href="index.php?file=10&amp;edit_news=6">
					<img border="none" title="Editer la News" src="dashboard/images/page_edit.gif">
				</a>
				<!-- suppression des news -->
				<a href="index.php?file=10&amp;suppr_news=6" onclick="return areyousure();">	
					<img border="none" title="Supprimer la News" src="dashboard/images/page_delete.gif">
				</a>
			</td>
		</tr>
		<tr id="com_43">
			<td>22/10/2010</td>
			<td colspan="3">Admin</td>
			<td>Coucou commentaire de test</td>
		</tr>
		<tr id="com_44">
			<td>22/10/2010</td>
			<td colspan="3">Admin</td>
			<td>Coucou commentaire de test</td>
		</tr>
		<tr id="com_45">
			<td>22/10/2010</td>
			<td colspan="3">Admin</td>
			<td>Coucou commentaire de test</td>
		</tr>
		<tr id="com_46">
			<td>22/10/2010</td>
			<td colspan="3">Admin</td>
			<td>Coucou commentaire de test</td>
		</tr>
		<tr style="height: 10px;"><td colspan="5"></td></tr>
		<tr bgcolor="lightgreen" class="org" id="news_7" onclick="displaySubline(7);">
			<td>7</td>
			<td>Lorem ipsum</td>
			<td>Bastian</td>
			<td>2010-07-10</td>
			<td style="padding-top: 4px;">
				<!-- édition des commentaires -->
				<a href="index.php?file=10&amp;edit_news_comments=7">	
					<img border="none" title="Edition des commentaires" src="dashboard/images/comment.gif">
				</a>
				<!-- édition des news -->
				<a href="index.php?file=10&amp;edit_news=7">
					<img border="none" title="Editer la News" src="dashboard/images/page_edit.gif">
				</a>
				<!-- suppression des news -->
				<a href="index.php?file=10&amp;suppr_news=7" onclick="return areyousure();">	
					<img border="none" title="Supprimer la News" src="dashboard/images/page_delete.gif">
				</a>
			</td>
		</tr>
	</tbody>
</table>

Le soucis c'est que IE lance la première fonction mais il ne prend pas en compte le changement d'attribut onclick pour lui mettre la seconde fonction à la place. Je sais pas comment faire :/

**danielhagnoul** · 09/08/2010, 11h28

Bonjour.

Exemple :

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		/*
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
		*/
 
		/* TEST */
		td {
			width:200px;
			height:24px;
			font-size:0.8em;
			color:blue;
			text-decoration:underline;
			cursor:pointer;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		function displaySubline(line){
			$('#news_'+line).attr('onclick','').click(function(){
				console.log("displaySubline, second click, line " + line);
 
				$(this).unbind("click");
 
				UndisplaySubline(line);
			});
		}
 
		function UndisplaySubline(line){
			$('#news_'+line).attr('onclick','').click(function(){
				console.log("UndisplaySubline, troisème click, line " + line);
 
				$(this).unbind("click");
 
				displaySubline(line);
			});
		}
 
		$(function(){
			// forme abrégée de document ready inutile dans les fonctions ci-dessus
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<table id="tablenut" cellspacing="0" cellpadding="0">
			<tbody>
				<tr id="news_6" bgcolor="lightblue" class="org" onclick="displaySubline(6);">
					<td>6</td>
					<td>Lorem ipsum TEST</td>
					<td>Maurin</td>
					<td>2010-07-09</td>
				</tr>
				<tr id="news_7" bgcolor="lightgreen" class="org" onclick="displaySubline(7);">
					<td>7</td>
					<td>Lorem ipsum</td>
					<td>Bastian</td>
					<td>2010-07-10</td>
				</tr>
		   </tbody>
		</table>
 
	</div>
</body>
</html>

**bastian06n** · 09/08/2010, 15h18

Super mon problème est résolu !! Merci bcp !!

**danielhagnoul** · 10/08/2010, 09h20

Bonsoir

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
/*
 * Idem, mais en plus élégant grâce à one().
 *
 * http://api.jquery.com/one/
 *
 * On l'utilise tellement souvent qu'on l'oublie,
 * mais il existe expressément pour ce genre de cas.
 */
 
function displaySubline(line){
	$('#news_'+line).attr('onclick','').one("click", function(){
		console.log("displaySubline, second click, line " + line);
 
		UndisplaySubline(line);
	});
}
 
function UndisplaySubline(line){
	$('#news_'+line).attr('onclick','').one("click", function(){
		console.log("UndisplaySubline, troisème click, line " + line);
 
		displaySubline(line);
	});
}

Remplacer une fonction d'un ondblclick

jQuery

Discussions similaires

Partager

Partager