Récupérer le contenu d'une div enfante (h1) si click sur une div parente (li)

**amdawb** · 02/05/2014, 15h55

Bonjour,
J'ai une page vidéos inspirée de ce site: http://www.donaukurier.de/videos/
Dans la partie supérieure (<div id="supra">), il y a le lecteur de youtube (<div id="player_lecteur">)et une div titre de la vidéo en cours de lecture(<div id="player_title">).
Dans la partie inférieure (<div id="infra">), il y a la liste des vidéos.
Les champs de ma table "videos" sont:
- id_youtube : id, primary-key, auto-increment,
- yt_source: identifiant de la vidéo chez youtube (ex: si l'adresse de la vidéo chez youtube est https://www.youtube.com/embed/a1b2c3d4e5, alors yt_source = a1b2c3d4e5),
- medium : image miniature de la vidéo
- titre_video: titre de la vidéo ,tinytext (ex: reportage sur la faune aquatique du lac Baikal)
- date_insert: date d'insertion,
- duree: durée de la vidéo.

La liste des vidéos est affichée sous forme d'onglets , et chaque onglet a plusieurs slides.
Au démarrage, le lecteur affiche la vidéo la plus récente, et dessous son titre.
Quand on click sur une miniature dans la liste des vidéos, elle s'éxécute dans le lecteur, et j'aimerais pouvoir afficher son titre dessous.
N'étant que débutant, et apprenant sur le tas grâce aux forums comme celui-ci, je voudrais savoir comment m'y prendre avec JavaScript ou en Php-MySql.
Voici mon code de la page videos.php. Il est abrégé et dépouillé des blocs hors sujet pour ne pas faire long:

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
<?php
require("../modules/config-db.php");
mysql_connect($adresse,$nom,$motdepasse);
mysql_select_db($database); 
mysql_query("SET NAMES 'utf8' ");  
?>
<div id="container_videos_playlist">
	<div id="supra">
		<div id="player_container">
			<div id="player_wrap">
				<div id="player_lecteur">
<?php
$sql = "SELECT * FROM videos ORDER BY date_insert DESC LIMIT 0,1";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
					 <iframe type="text/html" width="548" height="338" src="https://www.youtube.com/embed/<?php echo $donnee['yt_source']; ?>" frameborder="0" allowfullscreen></iframe>';
<?php
}
?>
				</div>
				<div id="player_title">
<?php
$sql = "SELECT * FROM videos ORDER BY date_insert DESC LIMIT 0,1";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
					 <h1><?php echo $donnee['titre_video']; ?>"</h1>
<?php
}
?>
				</div>
				<script>
					var identifiant;
					function lancer(identifiant){
						document.getElementById('player_lecteur').innerHTML = '<iframe type="text/html" width="548" height="338" src="https://www.youtube.com/embed/'+identifiant+'?autoplay=1" frameborder="0" allowfullscreen></iframe>';
						//document.getElementById('player_title')????????????????????
					}
				</script>
			</div>
		</div>
	</div>
	<div class="bloc_infra">
		<div class="title_infra">
			<div class="tabs_infra" id="tabs_infra1">
				<a href="#sport_loisirs">Sport / Loisirs<span class="petite_fleche"></span></a>
				<a href="#people_celebrites">People / Célèbrités<span class="petite_fleche"></span></a>
			</div>
		</div>
		<div class="content_infra">
			<div id="sport_loisirs">
				<div id="carrousel_1">
					<div id="slide1" class="slide">
						<ul>
<?php			
$sql = "SELECT * FROM videos WHERE rubrique='Sport / Loisirs' ORDER BY date_insert DESC LIMIT 0,8";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
							<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id);">
								<a href="#">
									<div class="img_play">
										<?php echo html_entity_decode($donnee['medium']);?>
										<span class="play_overlay"><img src="../mediatheque/videos/yt_play_medium.png" /></span>
									</div>
									<div class="grille_titre">
										<div class="ttl"><h1><?php echo stripslashes($donnee['titre_video']);?></h1></div>
										<span class="date_mise_en_ligne"><?php echo date("d.m.Y",strtotime($donnee['date_insert']));?></span>
										<span class="duree"><?php echo stripslashes($donnee['duree']);?></span>
									</div>
								</a>
							</li>
<?php		
}	
?>
						</ul>
					</div>
					<!----------------ici autres slides de l'onglet_1-------------->
				</div>
			</div>
			<div id="people_celebrites">
				<div id="carrousel_2">
					<div id="slide1" class="slide">
						<ul>
<?php			
$sql = "SELECT * FROM videos WHERE rubrique='people / Célèbrités' ORDER BY date_insert DESC LIMIT 0,8";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
							<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id);">
								<a href="#">
									<div class="img_play">
										<?php echo html_entity_decode($donnee['medium']);?>
										<span class="play_overlay"><img src="../mediatheque/videos/yt_play_medium.png" /></span>
									</div>
									<div class="grille_titre">
										<div class="ttl"><h1><?php echo stripslashes($donnee['titre_video']);?></h1></div>
										<span class="date_mise_en_ligne"><?php echo date("d.m.Y",strtotime($donnee['date_insert']));?></span>
										<span class="duree"><?php echo stripslashes($donnee['duree']);?></span>
									</div>
								</a>
							</li>
<?php		
}	
?>
						</ul>
					</div>
					<!----------------ici autres slides de l'onglet_2-------------->
				</div>
			</div>
			<!----------------ici d'autres onglets-------------->
		</div>
	</div>
</div>

Précision utile: le contenu du titre doit être affiché si click sur la div parente (<li>) et non spécifiquement sur le titre <h1>.

Votre aide m'est vitale.Merci.

**feecochette** · 02/05/2014, 16h06

Bonjour,

Sans te donner la réponse au complet voici quelques indices :

Rajoute à l'appel de la fonction JavaScript "lancer(identifiant)" un autre paramètre exemple "lancer(identifiant,titre)", ce nouveau paramètre peu être renseigner en PHP (tu le fait déjà pour l'identifiant de ta vidéo).

Ensuite édite ta fonction JavaScript "lancer" pour quel ajoute le nom de la vidéo dans le titre, cela devrais ressembler à ça :

Code :

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

document.getElementById('player_titre').innerHTML = titre;

La variable titre étant celle passée en paramètre de ta fonction "lancer".

**amdawb** · 02/05/2014, 19h40

Envoyé par feecochette

Bonjour,

ce nouveau paramètre peu être renseigner en PHP (tu le fait déjà pour l'identifiant de ta vidéo).

Je sais que le passage du paramètre titre se joue à ce niveau:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id);">
	<a href="#">
		<div class="img_play">
			<?php echo html_entity_decode($donnee['medium']);?>
			<span class="play_overlay"><img src="../mediatheque/videos/yt_play_medium.png" /></span>
		</div>
		<div class="grille_titre">
			<div class="ttl"><h1><?php echo stripslashes($donnee['titre_video']);?></h1></div>
			<span class="date_mise_en_ligne"><?php echo date("d.m.Y",strtotime($donnee['date_insert']));?></span>
			<span class="duree"><?php echo stripslashes($donnee['duree']);?></span>
		</div>
	</a>
</li>

Mais c'était facile pour passer l'Id comme paramètre 'identifiant' dans la <li> car $donnee['yt_source'] ressemble toujours à qq chose comme a1b2c3d4e5.
Par conte, si je veux faire idem pour le <h1>, alors $donnee['titre_video'] est de type tinytext, difficile à utiliser comme Id du h1 et le passer comme paramètre.

Pour le script Js, c'est OK:

Code :

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

1
2
3
4
5
6
7
var identifiant;
var titre;
function lancer(identifiant,titre){
	document.getElementById('player_lecteur').innerHTML = '<iframe type="text/html" width="548" height="338" src="https://www.youtube.com/embed/'+identifiant+'?autoplay=1" frameborder="0" allowfullscreen></iframe>';
	document.getElementById('player_title').innerHTML = titre;
	alert(titre);
}

à moins que de trouver une syntaxe js ou php qui signifie au <li> de capturer son id et son h1 au click, et ça j'avoue ne pas savoir faire.

**feecochette** · 02/05/2014, 21h25

Finalement donne ça :

Code :

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

<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id,'<?php echo $donnee['titre_video']; ?>');">

Le plus dur c'est de bien comprendre la syntaxe, surtout quand tu mélange les langages.

D'ailleurs il vaux mieux rajouter un replace à ta chaîne de caractère pour éviter d'avoir des soucis de syntaxe notamment avec le caractères '

**amdawb** · 02/05/2014, 22h15

Merci feecochette. ça marche, mais pas pour des titres avec des ' .
Je planche illico sur l'ajout des replace sur les chaines de caractères.
Encore merci.

**amdawb** · 02/05/2014, 23h08

Envoyé par feecochette

rajouter un replace à ta chaîne de caractère pour éviter d'avoir des soucis de syntaxe notamment avec le caractères '

Effectivement, je ne peux pas afficher des titres avec des "" , par contre en ajoutant addslashes

Code :

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

<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id,'<?php echo addslashes($donnee['titre_video']); ?>');">

:
j'arrive à afficher les tiTres avec des ' .
Pouriez-vous m'éclairer ( juste quoi chercher) sur l'ajout des replace aux chaines de caractères?

**amdawb** · 03/05/2014, 03h11

Un dernier coup de pouce, les gars. J'ai abattu 99.99% du boulot pour faire une superbe page vidéos, et ce serait vraiment dommage d'en rester là.
J'ai tenté ce code

Code :

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

<li id="<?php echo $donnee['yt_source']; ?>" onclick='lancer(this.id,"<?php echo str_replace('"','\"',$donnee['titre_video']); ?>");'>

mais il n'affiche pas les titres avec des apostrophes (')
J'ai tenté sans succès celui-là :

Code :

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

1
2
3
4
<li id="<?php echo $donnee['yt_source']; ?>" onclick='lancer(this.id,"<?php 
                $remove=array("'","\"");
                $put=array("/'","/\"");
                echo str_replace($remove,$put,$donnee['titre_video']); ?>");'>

Help please!

**amdawb** · 03/05/2014, 11h50

Finalement ça marche dans les cas de titres avec ( " ) ou ( ' ) comme ça:

Code :

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

<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id,'<?php echo addslashes(htmlentities($donnee['titre_video'])); ?>');">

Récupérer le contenu d'une div enfante (h1) si click sur une div parente (li)

JavaScript

Discussions similaires

Partager

Partager