incohérence passage paramètre d'une fonction

**EIN-LESER** · 27/04/2012, 08h44

Bonjour a tous.

Bien que le code soit en PHP et javascript je publie la question ici car je pense que le problème se situe dans la partie javascript.

Voila je construis dans un foreatch plusieurs span cachés et je veux pouvoir les faire apparaître a volonté en cliquant sur un "pseudo lien".

La boucle concatène une string avec un compteur numérique pour former une id unique qui servira a dire a la fonction en JS quel span rendre visible.

Le problème est que quand j'essaie de l’exécuter, sa donne rien. les span restent caché.

J'ai essaye de faire un alert dans la fonction pour voir ce que contien la variable passé en parametre a la fonction et c'est la que je comprends pas.

Sa m'affiche [object]

Si quelqun a une idée

voici le bout de code qui correspond:

creation des span et des pseudo liens:

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
 
//compteur pour le numero du span pour afficher les posts par 5 et cacher les suivants allant de 0 a N.
		$compt=0;
		//compteur pour afficher 5 posts dans le meme span allant de 1 a 5
		$index=1;
		foreach ($commentaire as $commentaires)
		{			
 
			if($compt==0 AND $index<=4)//premiere div a ne pas cacher
			{
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index++;
			}
			elseif($compt==0 AND $index==5)//premiere div a ne pas cacher avec fermeture du span
			{
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index=1;
				$compt++;
				$identifiant="hide".$compt;
				//span clicable pour afficher lesz posts suivants
				echo("<span onclick= 'cachercommentaires(".$identifiant.")'><p style= 'color:blue; text-decoration:underline; '>AFFICHER LES COMMENTAIRES SUIVANTS</p></span>");
				echo ("hide".$compt);
				echo('<div id="hide'.$compt.'" style="display: none;">');
 
			}
			elseif($compt!=0 AND $index<=4)//dives suivants
			{
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index++;			
			}
			elseif($compt!=0 AND $index==5)//dives suivants avec fermeture du span			
			{
				echo("</div>");
				$index=1;
				$compt++;			
				echo("<span onclick= 'cachercommentaires(hide".$compt.")'><p style= 'color:blue; text-decoration:underline; '>AFFICHER LES COMMENTAIRES SUIVANTS</p></span>");
				echo('<div id=hide'.$compt.' style="display: none;">');
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index++;				
			}						
		}
		echo("</div>");
		echo("</div>");

Et la fonction en JS:

Code :

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

1
2
3
4
5
6
 
function cachercommentaires(position)//Pour afficher les 5 prochains commentaires
{
	alert (position);
	document.getElementById(position).style.display = "block";
}

**SpaceFrog** · 27/04/2012, 08h50

Rappel: Nous sommes ici dans un forum javascript ...
Ton code php ne nous sert à rien ...
Merci de nous montrer le code html généré ...

**EIN-LESER** · 27/04/2012, 09h06

voici le html d'un des span:

Code :

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

1
2
 
<span onclick= 'cachercommentaires(hide1)'>

Toute la page donne sa (sorry pour la longueur.).

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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>RexFlex Php Edition</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
	<script type="text/javascript" src="inc/java/jscripts/jquery-1.6.2.min.js"></script>
	<!--<script type="text/javascript" src="inc/java/jscripts/jquery.hoverIntent.minified.js"></script>-->
	<script type="text/javascript" src="inc/java/jscripts/tiny_mce/tiny_mce.js"></script>
	<!--<link type="text/css" href="inc/css/base/jquery.ui.all.css" rel="stylesheet" />-->	
	<!--<script type="text/javascript" src="inc/java/jscripts/jquery-ui-1.8.16.custom.min.js"></script>-->
	<script type="text/javascript" src="inc/java/ajaxnavigation.js"></script>
	<link rel='stylesheet' media='screen' type='text/css' href='inc/style.css'>
	<link rel='stylesheet' media='screen' type='text/css' href='inc/rating.css'>
	<script type="text/javascript">
	// $(document).ready(function() {
 
	// $('.status').prepend("<div class='score_this'>(<a href='#'>Notez cet Rex</a>)</div>");
	// $('.score_this').click(function(evt){
		// $(this).slideUp();
		// return false;
	// });
 
	// $('.score a').live("click",function(evt) {
		// $(this).parent().parent().parent().addClass('scored');
		// $.get("pages/rating.php" + $(this).attr("href") +"&update=true", {}, function(data){
			// $('.scored').fadeOut("normal",function() {
				// $(this).html(data);
				// $(this).fadeIn();
				// $(this).removeClass('scored');
			// });
		// });
		// return false; 
	// });
	// $("#formulaire").hide();
	// $("a#showcomment").click(function(evt){
		// evt.preventDefault();
		// $("#commentaires").load("pages/viewpost_ajax.php",{idpost: $("#idpost").val(),numserie: 1*new Date()})
 
			// $("#formulaire").show();
 
		// })
		// $("#submit").live("click",function(evt){
			// var idpost= $("#idpost").val();
			// var name = $("#namecomment").val();
			// var mail= $("#mailcomment").val();
			// var commentaire= $("#textcomment").val();
			// var place = mail.indexOf("@",1);
			// var point = mail.indexOf(".",place+1);
			// if ((place <= -1)||(mail.length <=2)||(point <= 1))
				// {
				// alert('Entrez une adresse e-mail valide!!');
				// }
			// else{
				// $("#commentaires").load("pages/viewpost_ajax.php",{idpost: idpost,commentaire: commentaire,nom: name,mail: mail,numserie: 1*new Date()})
 
 
				// }
			//Stop event handling in non-IE browsers:
			// evt.preventDefault();
			// evt.stopPropagation();
			//Stop event handling in IE
			// return false;
 
		// })
 
 
	// })
	</script>
 
 
 
 
</head>
 
<body>
<div id='entete'>
		<table id="titre">
			<tr>
			<td><img src='pictures/sncf_Logo2011.png'></img></td>
			<td ><div id='gris'>REX</div> <div id='violet'>FLEX IG</div><div id='gris2'>MANAGEMENT</div></td>
			</tr>
		</table>
</div>
<div id='menu_droite'>
	<H3>Rechercher</h3>
	<!--formulaire pour la recherche simple. -->
	<form method="post" action="/management/index.php?page=recherche" >
 
	<input id='rech_value' type=text name='recherche'/>
	<input id='rech_button' type=submit name='envoyer' value='ok'/>
 
 
 
	</form>
 
 
 
 
	<span><a href='../' id='link'>REXFLEX</a></span>
	<span><a >MANAGEMENT</a></span>
	<span><a href='index.php?page=maintenance_phototeque'>PHOTOTHEQUE</a></span>
	<span id='last'><a href='index.php?page=maintenance_locavoiture'>LOCAVOITURE</a></span>
 
</div>	
<div id='gauche'>
<ul id='nav'>
			<li>
				<a  href="index.php?page=accueil">ACCUEIL</a>
			</li>
			<li>
				<a href="index.php?page=parcourir">PARCOURIR</a>
			</li>
			<li>
				<a href="index.php?page=abomail">S'ABONNER</a>
			</li>
			<li>
				<a href="index.php?page=poster">POSTER</a>
			</li>
</ul>
<div id='contenu'>
<script type="text/javascript"> 
tinyMCE.init(
{
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking",
	width:"100%",
 
	// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "center",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : false		
});	
 
function montrer()
{
document.getElementById("montrer").style.display = "none";
document.getElementById("hide").style.display = "block";
}
 
function cacher()
{
document.getElementById("montrer").style.display = "block";
document.getElementById("hide").style.display = "none";
}
 
function cachercommentaires(position)//Pour afficher les 5 prochains commentaires
{
alert (position);
document.getElementById(position).style.display = "block";
 
}
</script>
</br></br><h2>Les bonnes pratiques, ça s’échange !</h2></br></br></br></br></br></br><p><label id="fixed">Objectifs</label></p><div id="border"><p style="text-align: left;">La comparaison des études entre les deux entités a permis de mettre en évidence des points à améliorer et des bonnes pratiques à suivre de notre homologue : -    plan de pré-piquetage trop détaillé -    …  Cette pratique permet également de créer des liens entre les deux entités (constitution d’un réseau) et d’échanger les bonnes pratiques.</p></div><p><label id="fixed">dÉscriptif</label></p><div id="border"><p style="text-align: left;">-    Transmission d’un dossier PRO de chaque groupe TE de Montpellier et Marseille : o    PRO de Montpellier : création d’une voie Origine / Terminus en gare de Sète o    PRO de Marseille : Création d’une troisième voie entre Marseille et Aubagne (MAT). -    Analyse du dossier de Montpellier par le groupe TE de Marseille (et inversement). -    Conclusion lors d’une réunion dans chaque entité, afin de présenter les critiques du dossier à l’agent ayant réalisé l’étude ou au chef de groupe concerné</p></div><p><label id="fixed">bÉnÉfices attendus</label></p><div id="border"><p style="text-align: left;">Amélioration des études par la collaboration et l’échange entre les groupes TE de Montpellier et de Marseille</p></div></br></br></br><table id='constructtab'>	
	<tr>
	   <th>AXE</th>
	   <th>ROLE</th>
       <th>FREQUENCE</th>
       <th>AUTEUR(S)</th>
	   <th>PARUTION</th>
	   <th>VUES</th>
	</tr><tr><td><p><span style="color: black; background-color:#A5D710; font-size:1em;"><div style ="width:100%; text-align:center; ">PERF. TECHNIQUE</div></span></br></p></td><td><p>PILOTER LA PRODUCTION</p></td><td><p>régulièrement</p></td><td><p>FERRE&nbsp;Frédéric</p><p>BONNE&nbsp;Xavier</p></td><td><p>21/11/2011</p></td><td><p>1</p></td></tr></table></br><table style='float:right; margin-right:27px;'><tr><td><img src='../management/pictures/ratingplusNB.gif' alt='j/'aime' title='vote j aime' height='30' width='30'/></td><td><img src='../management/pictures/ratingmoinsNB.gif' alt='j\'aime' title='vote j aime pas' height='30' width='30'/></td></tr><tr><td>0</td><td>1</td></tr></table></br></br></br></br></br><span id= montrer onclick= 'montrer()' style='display: block;'><p style= 'color:blue; text-decoration:underline; '>AFFICHER LES COMMENTAIRES</p></span><div id=hide style="display: none;"><span onclick= 'cacher()'><p style= 'color:blue; text-decoration:underline; '>CACHER LES COMMENTAIRES</p></span></br></br><h2>COMMENTAIRES</h2></br></br><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-26</label></p><div id="border"><p style="text-align: center;"><p>retest</p></p></div><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-04</label></p><div id="border"><p style="text-align: center;">dtyery</p></div><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-04</label></p><div id="border"><p style="text-align: center;">test b119
</p></div><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-04</label></p><div id="border"><p style="text-align: center;">test 118
</p></div><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-04</label></p><div id="border"><p style="text-align: center;">test 8</p></div><span onclick= 'cachercommentaires(hide1)'><p style= 'color:blue; text-decoration:underline; '>AFFICHER LES COMMENTAIRES SUIVANTS</p></span>hide1<div id="hide1" style="display: none;"><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-04</label></p><div id="border"><p style="text-align: center;">test 6</p></div><p><label id="fixed">Auteur commentaire: QUAST Sébastien le 2012-04-04</label></p><div id="border"><p style="text-align: center;">test 5</p></div></div></div>	
	</br></br></br></br></br></br>	
	<p align='center'><p id='showcomment'>Commentaires: 7</p></p>
		<form method="post" action="/management/index.php?page=traitement_commentaire">
		<div id='commentaires'></div>
		<div id='formulaire'>
		<center>
		<label>Ajouter un commentaire</label><br></br>
		<textarea id='textcomment' name='textcomment' cols=80 rows=5></textarea></br>
		<label>Nom</label>
		<input type='text' id='namecomment' name='namecomment' value="QUAST" disabled='true' style='margin-left:32px;'></input></br>
		<label>PrÉnom</label>
		<input type='text' id='firstnamecomment' name='firstnamecomment' value="Sébastien" disabled='true'></input></br>
		<label>Mail</label>
		<input type='text' id='mailcomment' name='mailcomment' value="sebastien.quast@sncf.fr" disabled='true' style='margin-left:32px;'></input></br>
		<input type=hidden id='idpost' name='idpost' value='6'></input>
		<input type=submit id='submit' value='Envoyer'></input></br>
		</center>
		</form>
		</div></div>
</div>
 
 
</body>
</html>

**SpaceFrog** · 27/04/2012, 09h19

Première chose

un id doit être UNIQUE sur une page !!!
je vois dans ton code un paquet d'id dupliqués !!!!

ensuite si hide1 est un id c'est a dire du string

Code :

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

<span onclick= 'cachercommentaires(hide1)'>

devrait être

Code :

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

<span onclick= 'cachercommentaires("hide1")'>

avec des quotes autour...

**EIN-LESER** · 27/04/2012, 09h22

J'ai trouvé mais finalement l'erreur etais en PHP.

Il falait faire comme sa:

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
 
//compteur pour le numero du span pour afficher les posts par 5 et cacher les suivants allant de 0 a N.
		$compt=0;
		//compteur pour afficher 5 posts dans le meme span allant de 1 a 5
		$index=1;
		foreach ($commentaire as $commentaires)
		{			
 
			if($compt==0 AND $index<=4)//premiere div a ne pas cacher
			{
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index++;
			}
			elseif($compt==0 AND $index==5)//premiere div a ne pas cacher avec fermeture du span
			{
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index=1;
				$compt++;
				$identifiant="hide".$compt;
				//span clicable pour afficher lesz posts suivants
				echo("<span onclick= 'cachercommentaires(\"hide".$compt."\")'><p style= 'color:blue; text-decoration:underline; '>AFFICHER LES COMMENTAIRES SUIVANTS</p></span>");
				//echo ("hide".$compt);
				echo('<div id="hide'.$compt.'" style="display: none;">');
 
			}
			elseif($compt!=0 AND $index<=4)//dives suivants
			{
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index++;			
			}
			elseif($compt!=0 AND $index==5)//dives suivants avec fermeture du span			
			{
				echo("</div>");
				$index=1;
				$compt++;			
				echo("<span onclick= 'cachercommentaires(\"hide".$compt."\")'><p style= 'color:blue; text-decoration:underline; '>AFFICHER LES COMMENTAIRES SUIVANTS</p></span>");
				echo('<div id="hide'.$compt.'" style="display: none;">');
				echo ('<p><label id="fixed">Auteur commentaire: '.$commentaires[2].' '.$commentaires[3].' le '.$commentaires[5].'</label></p>');		
				echo('<div id="border"><p style="text-align: center;">'.$commentaires[1].'</p></div>');
				$index++;				
			}						
		}
		echo("</div>");
		echo("</div>");

Et le JS

Code :

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

1
2
3
4
5
6
7
 
function cachercommentaires(position)//Pour afficher les 5 prochains commentaires
{
alert (position);
document.getElementById(position).style.display = "block";
 
}

Merci bien en tout cas.

Par contre si un op pouvait transferer le sujet dans le forum php ou il serait plus a sa place

Encore merci

**EIN-LESER** · 27/04/2012, 09h23

Tu a raison spacefrof l'un des problemes se situe bien la.

Ce n'est en fait pas prevus pour etre multi browser.

Je suis sur un projet pour un intranet ou l'on m'impose ie comme navigateur unique donc tout est developpé sur le projet pour cette horreur

**SpaceFrog** · 27/04/2012, 09h29

Peu importe navigateur unique ou multibrowser ...
Un id DOIT ETRE UNIQUE

incohérence passage paramètre d'une fonction

JavaScript

Vue hybride

Discussions similaires

Partager

Partager