[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