[DOM] Interaction entre PHP et Javascript

**Calvein** · 23/12/2008, 00h51

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 js :

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

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 php :

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

1
2
3
4
5
6
7
8
9
10
11
<?php foreach ( $chapters as $chapter ) { ?>
                    <div class='chapter'>
                        <!-- Affiche les informations du chapitre -->
                            <!-- Titre, description, etc... -->
                        <!-- Affiche la durée du chapitre -->
                        <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

**SpaceFrog** · 23/12/2008, 09h11

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 ...

**Calvein** · 23/12/2008, 09h17

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 :/

**SpaceFrog** · 23/12/2008, 09h21

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 ...

**Bovino** · 23/12/2008, 09h41

Code :

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

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.

**SpaceFrog** · 23/12/2008, 09h43

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à

**Bovino** · 23/12/2008, 09h52

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 :

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

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 :

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

1
2
var debut = chapitre.getElementsByTagName('span')[0].innerHTML;
var fin = chapitre.getElementsByTagName('span')[1].innerHTML;

**SpaceFrog** · 23/12/2008, 09h58

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 ...

**Calvein** · 23/12/2008, 10h02

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 :

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
 
<?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 :

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

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

**SpaceFrog** · 23/12/2008, 10h37

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 ...

**Calvein** · 23/12/2008, 10h56

# 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

**Calvein** · 23/12/2008, 11h49

Je double poste car j'ai trouver la solution

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
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.

[DOM] Interaction entre PHP et Javascript

JavaScript

Discussions similaires

Partager

Partager