[DOM] Interaction entre PHP et Javascript

Version imprimable

J'hésitais à poster ce topic dans PHP mais il a plus sa place ici je pense.
Je sais très bien que le PHP s'exécute côté serveur et le javascript côté client.

J'expose le topo :

J'ai un tableau en PHP que je parcourt avec la fonction foreach()
J'ai une vidéo en flash et des chapitres
J'aurai aimé mettre en évidence la case des chapitres lorsque je suis bien entre le début et la fin du chapitre.

Voilà mon code simplifié :
Code:

1 2 3 4 5 var currentPosition = 0; function positionListener(obj) { currentPosition = obj.position; }
currentPosition est donc la position sur la vidéo en dixième de seconde.
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php foreach ( $chapters as $chapter ) { ?> <div class='chapter'>    <div class='chap_duration'> Début :<?php echo $chapter['debut'] ?> Fin :<?php echo $chapter['fin'] ?> </div> </div> <?php } ?>
Ce que j'aurai aimé, c'est de modifié le css des div 'chapter' et 'chap_duration' lorsque la variable 'currentPosition' du javascript se trouve comprise entre les variables '$chapter['debut']' et '$chapter['fin']' du PHP.

Merci :)

23/12/2008, 09h11
SpaceFrog

il faut visualiser ce que font chacun de leur coté php et javascript ...

php génère le code html javascript ... puis l'envoie au client ...
donc ta boucle foreach est terminée avant d'arriver chez le client ...

qu'est ce qui determine la fin d'un chapitre ?
c'est du flash ???

si c'est le cas il faudrait en jouer de l'action script qui lui se passe coté client ...
23/12/2008, 09h17
Calvein

Citation:

Envoyé par SpaceFrog

il faut visualiser ce que font chacun de leur coté php et javascript ...

php génère le code html javascript ... puis l'envoie au client ...
donc ta boucle foreach est terminée avant d'arriver chez le client ...

qu'est ce qui determine la fin d'un chapitre ?
c'est du flash ???

si c'est le cas il faudrait en jouer de l'action script qui lui se passe coté client ...

La fin du chapitre est quand la variable javascript 'currentPosition' vaut la variable PHP $chapter['fin'] mais du foreach, c'est à cause du foreach que je bloque :/
23/12/2008, 09h21
SpaceFrog

ce n'est pas comme cela que tu pourras le gerer ...
comme dit plus haut le for each est terminé avant que la page n'arrive chez le client !!!
il faudra le faire au moyen d'eun combinaison entre actionscript et javascript ...
quoi que même tout en AS devrait marcher ...
23/12/2008, 09h41
Bovino
Code:

1 2 3 4 <div class='chap_duration'> Début :<?php echo $chapter['debut'] ?> Fin :<?php echo $chapter['fin'] ?> </div>
Puisque tu affiches les variables en question sur ta page, il est possible de les récupérer avec JavaScript puis de tester l'égalité dans une fonction périodique.
23/12/2008, 09h43
SpaceFrog

Beef la boucle for est terminée quand la page arrive coté client il faut juste passer à js les variables au moyen d'action script ... php ne peut rien à ce niveau là
23/12/2008, 09h52
Bovino
Je le sais bien, ce que je veux dire, c'est que la valeur de ses variables php sont affichées dans la page HTML, donc récupérables via le DOM avec JavaScript :
Code:

1 2 3 4 <div class='chap_duration'> Début :<?php echo <span>$chapter['debut']</span> ?> Fin :<?php echo <span>$chapter['fin']</span> ?> </div>
Ensuite, coté JavaScript, en imaginant que la variable chapitres par exemple pointe sur une div de classe 'chap_duration', tu peux obtenir :
Code:

1 2 var debut = chapitre.getElementsByTagName('span')[0].innerHTML; var fin = chapitre.getElementsByTagName('span')[1].innerHTML;
23/12/2008, 09h58
SpaceFrog

oui mais comme la page arrive en bloc ça ne donnera rien
C'est en passant par AS qu'il faut passer une variable à javascript sur la page pour signaler la fin du chapitre ...
puis avec un setInterval courrant sur la page on teste le changement de la variable ...

Je ne connait rien à l'AS D:

Je pense avoir trouvé, c'est assez barbare mais ça doit fonctionner.

Je récupére mes valeurs de fin et de début dans un tableau PHP puis dans un tableau javascript et là je compare avec la variable currentPosition.

EDIT : Voilà en gros ce que j'ai fait :
Code:

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 <?php // Récupère les Mark in/out des chapitres for ( $i = 0 ; $i < count( $chapters) ; $i ++ ) { $mark_in[$i] = $chapters[$i]['Chapter']['mark_in']/25; $mark_out[$i] = $chapters[$i]['Chapter']['mark_out']/25; } ?> <script type="text/javascript"> <!-- <?php // Crée un tableau javascript des Mark in/out foreach( $mark_in as $cle => $valeur ) { echo "mark_in[$cle] = '$valeur';"; } foreach( $mark_out as $cle => $valeur ) { echo "mark_out[$cle] = '$valeur';"; } ?> var currentPosition = 0; function positionListener(obj) { currentPosition = obj.position; for ( i = 0 ; i < count(mark_in) ; i++ ) { if ( currentPosition >= mark_in[i] && currentPosition <= mark_out[i] ) { var tmp = $("#test" + i ).get(0); if (tmp) { tmp.innerHTML = ">"; } } } }
Pour ma page de test j'ai 3 chapitresn j'ai crée un petit span :
Code:

1 2 <span id="test<?php echo $i ?>"></span>
Le $i du test vaut bien 0 pour le premier chapitre et est donc comme la première valeur des tableau mark_in et mark_out du javascript.

Le problème c'est que ça ne marche pas, ça fait longtemps que j'ai pas touché à du JS aussi :d

23/12/2008, 10h37
SpaceFrog

tout dépend de ce que tu souhaites faire au final
je pensais qu'il s'agissait de faire s'enchainer les flash coté client ...
23/12/2008, 10h56
Calvein

Citation:

# J'aurai aimé mettre en évidence la case des chapitres lorsque je suis bien entre le début et la fin du chapitre.

J'ai pas été très clair, en fait j'ai des div pour chaque chapitre (mon foreach), avec comme id chapitre+$i, et j'aurai aimé changer le style de ce div si la position de la vidéo est comprise dans ce chapitre.

Pas de flash :p

Je double poste car j'ai trouver la solution :)

Code:

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
function positionListener(obj) {
	var mark_in = new Array;
	<?php
        // Crée un tableau javascript des Mark in/out 
        foreach( $mark_in as $cle => $valeur )
        {
            echo "mark_in[$cle] = '$valeur';\n";
        } 
        ?>
	var mark_out = new Array;
	<?php
        foreach( $mark_out as $cle => $valeur )
        {
            echo "mark_out[$cle] = '$valeur';\n";
        }
        ?>
	var long = <?php echo $long ?>; 
	currentPosition = obj.position;
	var i = 0;
	for ( i = 0 ; i < long ; i++ )
	{
		if ( currentPosition >= mark_in[i] && currentPosition <= mark_out[i] )
		{
			// Code à ajouter
		}
		else
		{
			// Code à ajouter
		}
	}
}

Pour info j'utilise le player flash JW Player.