Discussion :

[Thibaud2606]

Bonjour,

Je m'arrache les cheveux depuis deux jours car je ne vois et ne comprend pas où est mon erreur.
Je souhaite afficher tous les films présents dans ma base et avec du javascript, afficher une sorte de fiche. J'ai bien ma liste des films mais lorsque je veux voir la fiche je retrouve toujours les mêmes informations, c'est à dire le premier film de la base. Voila le code :

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
 
	try {
			$bdd = new PDO('mysql:host=localhost;dbname=videotheque', 'X', 'X');
		} catch (Exception $e) {
			die('Erreur : ' . $e->getMessage());
			}
 
	$req = $bdd->prepare('SELECT * FROM films;');
	$req->execute(array());
 
	while ($data = $req->fetch()) {
		echo '<tr>
					<td>
						<img style="width:30%;" src="pictures/jaquettes/'.$data['jaquette'].'">
					</td>
					<td>
						<a href="javascript:showPopup();" title="Télécharger">
							'.$data['nom'].'
						</a>
					</td>
					<td>
						<a href="_download.php?dir='.$data['chemin'].'/'.$data['nom'].$data['extension'].'">
							<img src="pictures/download.png" title="Télécharger"/>
						</a>
					</td>
			  </tr>
			  <tr>
					<td></td>
			  </tr>
			  <div id="customPopup">
					<h3>'.$data['nom'].'</h3>
					<p>Synopsis :</br>
						'.$data['synopsis'].'
					</p>
					<p> </p>
					<input type="button" value="Ok" onclick="hidePopup();" />
			  </div>';
	}
 
}

Mais est-ce que ça viendrait plutôt de l'utilisation de javascript étant donné qu'il n'agit que côté client ? Pourtant j'affiche à chaque fois les informations qui sont cachées grâce à du CSS. Pourquoi ne s'affichent-elles pas ?

Quelqu'un a une idée ?

[RunCodePhp]

Salut

Je ne vois pas trop quel est coté visuel recherché avec le code JS, vu qu'on a pas le code JS.

Toujours est-il qu'il y a des erreurs de HTML, ça pourrait venir de là.
Même si cela n'est pas lié, une erreur de HTML sera toujours une erreur.

Le code HTML dans la boucle commence par un <tr>, donc on suppose qu'il y a eu un <table> avant la boucle, de même un </table> après la boucle.

Avant la fin de la boucle, donc en dernier il est intercalé une <div>.
Ce n'est pas correcte.
Cela veut dire qu'on aurait un code HTML comme ceci : (je simplifie)

Code :

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

1
2
3
4
5
6
7
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <div>... DIV MAL PLACE ...</div>
</table>

A la limite on peu faire ceci, c'est à dire de mettre la <div> dans une cellule (un <td>) afin de respecter la cohérence de la structure de l'ensemble du tableau :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2">
            <div>... DIV BIEN PLACE ...</div>
        </td>
    </tr>
</table>

Ensuite ton tableau comporte plusieurs cellules (<td>).
Or, la 1ère ligne (<tr>) contient 4 colonnes, mais la 2ème contient 1 seule colonne.
Ce n'est pas correcte, un tableau, et quelque soit le nombre de ligne, toutes les ligne DOIT avoir exactement le même nombre de colonnes.
Cependant, visuellement on aimerait avoir qu'une seule colonne (ou que 2), dans ce cas il faut définir le nombre de colonne à fusionner afin de respecter exactement le nombre de cellules.
(C'est exactement le même principe que Excel ou OO.)

Exemple de table avec 3 lignes, 4 colonnes, dont 1 ligne aura 2 cellule (donc 1 fusion de 2 cellules), puis 1 ligne avec 1 colonne (donc 4 fusions).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <td>Colonne 1</td>
        <td>Colonne 2</td>
        <td>Colonne 3</td>
        <td>Colonne 4</td>
    </tr>
        <td colspan="2">Colonne 1 (fusion de 1 et 2)</td>
        <td colspan="2">Colonne 2 (fusion de 3 et 4)</td>
    </tr>
    </tr>
        <td colspan="4">Colonne 1 (fusion de 1, 2, 3 et 4)</td>
    </tr>
</table>

Avec les clospan (ou fusion) on respecte tout le temps le nombre total de colonne du tableau (ici 4 colonnes).



Mais encore, on défini dans la boucle une <div> avec un attribut id (id="customPopup").
Cela veut dire qu'il va avoir autant de <div> avec cet id que cela va boucler.
C'est une erreur, car un attribut id (qui veut dire identifiant) par définition DOIT être unique (donc jamais plus de 1).
Donc 2 chose une :
- Soit il ne faut pas utiliser id comme attribut mais autres chose (genre class)
- Soit utiliser id mais ne plus mettre dans la boucle mais après la boucle pour que cet élément HTML soit réellement unique dans la page Web.


Bref. Les bases en HTML à mon sens ne sont pas encore bien acquises.
Tu risques de galérer lors des interactions avec du Css, Javacript et autre.

En tout cas un navigateur n'avertis pas en cas d'erreurs de HTML, il ne fait que tant bien que mal interpréter le code, du coup c'est totalement le hasard si c'est le résultat visuel qu'on voulait (en cas d'erreur).
A moins d'exploiter un outil de débogage, genre extension Web Développer sur FireFox pour exemple.

[tdutrion]

Bonjour,

Il faudrait les codes de showPopup et hidePopup pour en savoir un peu plus...

Comme le dit RunCodePhp, ton HTML est mal formé, et c'est ça qui fait que tu ouvres toujours la première popup en fait (ton navigateur prends le premier id trouvé dans le dom, qui est censé être le seul...).

[Thibaud2606]

Rebonsoir,

RunCodePhp tu as raison je n'ai pas toutes les bases encore. Je suis en train d'apprendre et en ce moment vous m'aidez énormément.
J'ai donc corrigé mon code, j'ai sorti mon div de la table de toute façon je le cache.
Mais comme tu as dit il n'y a qu'un seul identifiant pour chaque. Or comme tu as pu le voir dans mon code, il se trouve dans une boucle. Mais le truc c'est que je ne vois pas comment faire sinon pour afficher mes fiches avec un id différent.
Je vais faire des recherches.

Merci beaucoup de votre aide et bonne nuit


[EDIT]

Problème résolu. Merci à tous les deux pour vos conseils. En fait il a fallu du coup que j'incrément ma div à chaque passage de la boucle et qu'ensuite je passe en paramètre le nom de la div qui s’incrémente à la fonction JS.

J'espère que vous m'avez compris mais en tout cas MERCI