Rendre élément visible/caché

**TK5EP** · 29/08/2009, 10h55

Bonjour,

Dans une page php, je souhaite rendre visible un élément que j'ai caché avec display:none en CSS.

Quand je lance un bout de javascript pour le rendre visible avec display:block, Firebug me dit que l'élément n'est pas déclaré.
Quand je fais la même manoeuvre depuis la console Firebug, ça marche. L'élément semble donc bien déclaré !?

Où ai-je loupé quelque chose ? Ca m'agace !

Merci pour votre aide.

**andry.aime** · 29/08/2009, 16h48

Sans voir ton code, difficile à imaginer d'où vient l'erreur.

**Bovino** · 29/08/2009, 18h10

Envoyé par andry.aime

Sans voir ton code, difficile à imaginer d'où vient l'erreur.

On peut toutefois supposer qu'il essaye d'afficher son élément avant que celui-ci ne soit intégré dans le DOM, mais comme tu dis, sans code, difficile de donner une vraie solution

**TK5EP** · 29/08/2009, 22h46

Je sais pas si c'est une bonne idée, mais voici mon code :

L'élément caché est le DIV 'saisie'

La fonction qui doit le rendre visible ou le cacher est "changeVisibility"

comme expliqué, j'ai un message d'erreur me disant que l'élément n'existe pas alors que j'arrive à le masquer avec la console Firebug.
Compris que c'est peut-être une problème de présence dans le DOM au moment de l'appel de la fonction. Yes, but what ?

Merci,
------------------------------------------------------

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
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
<?php
// script to handle markers
// TK5EP 26/08/09
 
// get connection details
require ("rsmap/connect_markers.php");
?>
 
<html>
<head>
<link rel='stylesheet' href='readlogrsmap.css' />
<script LANGUAGE="JavaScript">
function deleteAlert(name,id,pagenum){
		var conBox = confirm("Etes-vous certain de vouloir supprimer le marqueur " + name +" ?");
		if(conBox){ 
		location.href="<?=$_SERVER['PHP_SELF'];?>?do=del&id=" + id + "&pagenum=" + pagenum;
		}else{
		return;
		}
}
 
function changeVisibility(id,action) {
       if (action=="hide") {
            document.getElementById(id).style.display = "none";
       } else {
            document.getElementById(id).style.display = "block";
       }
}
</script>
</head>
<body>
 
<?php
 
// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
	die('Not connected : ' . mysql_error());
}
 
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
	die ('Can\'t use db : ' . mysql_error());
}
 
// pour compter le nombre d'enregistrements
$query="SELECT 'COUNT(*)' FROM markers";
$result = mysql_query($query) or die(mysql_error());
// nb total d'enregistrements
$totalcount = mysql_num_rows($result);
// nb de lignes par page
$nblignesparpage=25;
// verifie s'il s'agit de la page 1, si non c'est la page 1 !
if (!(isset($pagenum))) 
{$pagenum = 1;} 
// nr de la dernière page
$last = ceil($totalcount/$nblignesparpage); 
// il ne peut y avoir une page < 1
if ($pagenum < 1){$pagenum = 1;} 
elseif ($pagenum > $last){$pagenum = $last;} 
// on le paramètre LIMIT de la requete
$max = ' LIMIT ' .($pagenum - 1) * $nblignesparpage.',' .$nblignesparpage;
 
echo "Il y a ". $totalcount ." marqueurs.";
 
// lire la base (pour le moment on lit tout)
$query="SELECT * FROM markers ORDER BY callsign ASC".$max ;
$resultat=mysql_query($query) or die(mysql_error());
 
echo "<table class='X1' width='100%' border='0' cellspacing='0' cellpadding='0' align='center'>";
echo "<tr bgcolor='blue' style ='color:white'><td width='60'>Callsign</td><td wisth='30'>WWloc</td><td width='75'>Lat</td><td width='100'>Lng</td><td>Alt</td><td>Freq</td><td>Comments</td><td>Type</td><td width='20'>Sup</td><td width='20'>Edit</td></tr>";
 
$i=0;
while ( $ligne=mysql_fetch_array($resultat) )
	{
		if ($i % 2) {	$bgcolor='#FFFFFF'; } else { $bgcolor='#EAEAEA'; }
 
echo "<td>".$ligne['callsign']."</td><td>".$ligne['wwloc']."</td><td>".$ligne['lat']."</td><td>".$ligne['lng']."</td><td>".$ligne['alt']."</td><td>".$ligne['freq']."</td><td>".$ligne['comments']."</td><td>".$ligne['type']."</td><td><a href=\"javascript: deleteAlert('".$ligne['callsign']."','".$ligne['id']."','".$pagenum."')\"><img src='img/cancel.png' border='0'></a></td><td><a href='".$_SERVER['PHP_SELF']."?do=edit&id=".$ligne['id']."&pagenum=".$pagenum."'><img src='img/edit.gif' border='0'</a></td></tr>";
 
++$i;
	}
 
echo "<tr><td colspan='10'><center>";
 
// si 1ère page
if ($pagenum == 1) {}
else {
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=1'> <<-First</a> ";
echo " ";
$previous = $pagenum-1;
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$previous'> <-Previous</a> ";
}
 
echo "--Page $pagenum of $last --";
 
// si dernière page
if ($pagenum == $last) {} 
else {
$next = $pagenum+1;
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$next'>Next -></a> ";
echo " ";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$last'>Last ->></a> ";
}  
echo "</center></td></tr></table>";
 
 
// CASE on veut supprimer un enregistrement
if ($_GET['do'] == "del"){
		$query="DELETE FROM ".$database." WHERE markers.id = '".$_GET['id'] ."' LIMIT 1 ";
		mysql_query($query) or die (mysql_error());
		// return to where we come
		echo"
		<script type=\"text/javascript\">
			window.location = 'gestmarkers.php?pagenum='+$pagenum;
			//window.location = 'gestmarkers.php';
		</script>";
		}
 
 
// CASE si on veut modifier un enregistrement
if ($_GET['do'] == "edit"){
		echo"
		<script type=\"text/javascript\">
			//document.getElementById('saisie').style.visibility='visible';
			changeVisibility(saisie,'show');
		</script>";
}
 
// CASE on crée une nouveau marqueur
if ($_GET['do'] == "create"){
		$callsign = strtoupper($_POST['callsign']);
		$wwloc = strtoupper($_POST['wwloc']);
		$comments=$_POST['comments'];
 
		$query="INSERT INTO markers VALUES (NULL,'".$callsign."','".$_POST['freq']."','".$_POST['lat']."','".$_POST['lng']."','".$wwloc."','".$_POST['alt']."','".$comments."','".$_POST['type']."')";
 
		echo $query;
		die();
		mysql_query($query) or die (mysql_error());
 
		echo"
		<script type=\"text/javascript\">
			window.location = 'gestmarkers.php?pagenum='+$pagenum;
			//window.location = 'gestmarkers.php';
		</script>";
}
 
echo "<br /><br /><div id='saisie' style='display:none;'>
<form margin='0' method='POST' action='gestmarkers.php?do=create'>
Callsign : <input name='callsign' type='text' size='6' />
Freq : <input name='freq' type='text' size='6' />
Locator : <input name='wwloc' type='text' size='6' />
Lat : <input name='lat' type='text' size='10' />
Lng : <input name='lng' type='text' size='10' />
Alt : <input name='alt' type='text' size='3' />
Comment : <input name='comments' type='text' size='50' />
Type : <select name='type' />
	<option value='BCN24G'>Balise 24 G</option>
	<option value='BCN10G'>Balise 10G</option>
	<option value='BCN57G'>Balise 5.7G</option>
	<option value='BCN2G'>Balise 2.4G</option>
	<option value='BCN1G'>Balise 1.2G</option>
	<option value='STN'>Stations</option>
	</select>
<input type='submit' value='Save'/>
<form>
</div>";
 
echo"</body></html>";
 
mysql_close();
 
// fonction PHP pour convertir la date MySQL Ó afficher
function dateConv($value) {
		$final = strftime('%d/%m/%y %H:%M', strtotime($value));
		return($final);
}
?>

**Bovino** · 30/08/2009, 08h40

Les prochaines fois, n'oublies pas les balises [code] et postes le code HTML généré, pas le PHP qui est rarement utile pour deboguer JavaScript...

Bon, comme je le préssentais

Code :

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

changeVisibility(saisie,'show');

est appelée avant la création de la div 'saisie' donc ta fonction est incapable de la retrouver puisqu'elle n'existe pas.
Ensuite, le paramètre doit être passé sous forme de chaine sinon JavaScript le prend pour une variable, qui n'existe pas non plus d'où l'erreur !

Code :

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

changeVisibility('saisie','show');

à placer aprèsl'insertion de la div dans le code.

**TK5EP** · 30/08/2009, 19h40

Merci Monsieur,

J'avais réussi à faire marcher mon bazar en réorganisant un peu le code, ce qui est revenu à ta solution , à savoir appeler ma fonction après que l'élément est été créé.

Par contre, je n'ai pas modifié l'appel à la fonction, mais tu as raison, il vaut mieux mettre les '

Merci encore,

Cdlt,

**RomainVALERI** · 31/08/2009, 10h45

Même si ton problème ponctuel est résolu, juste cette remarque en passant :

Au lieu de donner la valeur "block" à un élément que tu veux faire réapparaitre, il vaut mieux lui assigner une chaine vide, ce qui permettra de laisser le navigateur donner à l'élément la valeur par défaut de ce type d'élément. En appelant ta fonction sur un élément de type "bloc", comme un div par exemple, ça ne fera aucune différence. Par contre, ce changement te permettra d'appeler cette même fonction sur d'autres éléments de tes pages, en fonction des besoins, sans t'obliger à te préoccuper de savoir si l'élément s'affiche en bloc ou dans le flux (inline).

Code javascript :

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

1
2
3
4
5
6
7
function changeVisibility(id,action) {
       if (action=="hide") {
            document.getElementById(id).style.display = "none";
       } else {
            document.getElementById(id).style.display = "";
       }
}

Rendre élément visible/caché

JavaScript

Discussions similaires

Partager

Partager