11548 sujets

JavaScript, DOM et API Web HTML5

[jQuery] Cibler une variable php autrement qu'avec un id [Resolu]

Bonsoir,

Je suis face au problème suivant : j'ai un script AJAX qui actualise toute les secondes une variable de mon code php, cette variable est indiquée au code AJAX par des balises <span> : ça m’empêche de faire une opération en php avec cette variable actualisée car mon instruction ( $a = <span id="timer1">$b</span> - $c;) n'a alors pas de sens.

AJAX propose t-il un autre moyen que des balises pour récupérer une variable dans du code php ? Existe t-il une façon de jouer avec php et les balises pour s'en sortir ?

<code type="html">
// Script qui actualise le timestamp actuel 
	<script type="text/javascript"> 
	//<![CDATA[ 
	
		var spanId = 'timer1';
		var spanVal=<?php echo time() ?>; 
		 
		window.onload = function() {
			var spanElt = document.getElementById(spanId); 
			setInterval( function() {
				spanElt.innerHTML=spanVal++; 
			} , 1000 ); 
		}; 
	//]]> 
	</script>
</code>

Modifié par Tchernobyl (07 Aug 2011 - 15:13)
Re Smiley cligne

Un Id désigne un élement unique dans le document. Il faut donc utiliser les classes où donner un identifiant différent pour chaque élement.

Création de la liste où chaque "timer" a son propre identifiant (timer1, timer2, ...)

<ul>
<?php
$i=1;
 foreach($infos_wall as $cle){
	$timediff=time()-$cle[1];
	echo '<li>'.$cle[0].'<br />Il y a <span id="timer'.$i.'">'.$timediff."</span> secondes</li>\n";
}
?>
</ul>


Nous obtenons ainsi
<ul>
	<li>Salut<br />Il y a <span id="timer1">0</span> secondes</li>
	<li>La forme ?<br />Il y a <span id="timer2">5</span> secondes</li>
	<li>Oui<br />Il y a <span id="timer3">10</span> secondes</li>
</ul>


Ensuite, la partie Javascript permettant de réferencer les élements HTML pour mise à jour à intervalle régulier.
<script type="text/javascript">//<![CDATA[
	var msgInfos=[];

	window.onload=function(){
		var
			i=1,elt,val;
		
		/*	Recherche tous les élements HTML ayant un identifiant commençant par "timer" et suivi d'une valeur numérique		
			Alimente le tableau msgInfos :

				msgInfos[i][0] = Element HTML
				msgInfos[i][1] = Compteur
		*/
		while(elt=document.getElementById('timer'+i)){
			val=elt.firstChild.nodeValue;
			msgInfos[i++]=[elt,val];
		}
		setInterval(
			function(){
				var i;
				for(i in msgInfos){
					// Incrementation du compteur
					msgInfos[i][1]++;
					// Mis à jour du contenu de l'élement HTML
					msgInfos[i][0].innerHTML=msgInfos[i][1];
				}
			},1000
		);
	}
	//]]>
</script>
[/i][/i][/i][/i][/i]
Modifié par Eric2A (05 Aug 2011 - 00:41)
Je n'ai pas compris par contre le rapport avec l'AJAX et l'utilisation de PHP dans le premier post ?
C'est juste du Javascript.
Salut Eric2A, je viens d'essayer le script et je suis surpris qu'il ne fonctionne pas (je pensais en avoir compris le fonctionnement pourtant).

Il n'y a pas de confusions entre les $i du script, celui de la page, enfin quelque chose comme ça ?

@vincentD83 : oui, confusion de ma part Smiley langue
L'exemple ci-dessous (sans la création dynamique de la liste) fonctionne...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Essai</title>
	<script type="text/javascript">//<![CDATA[
		var msgInfos=[];

		window.onload=function(){
			var i=1,elt,val;
			while(elt=document.getElementById('timer'+i)){
				val=elt.firstChild.nodeValue;
				msgInfos[ i++ ]=[ elt,val ];
			}
			setInterval(
				function(){
					var i;
					for(i in msgInfos){
						msgInfos[ i ][ 1 ]++;
						msgInfos[ i ][ 0 ].innerHTML=msgInfos[ i ][ 1 ];
					}
				},1000
			);
		}
		//]]>
	</script>
</head>
<body>
	<ul>
		<li>Il y a <span id="timer1">0</span> secondes</li>
		<li>Il y a <span id="timer2">5</span> secondes</li>
		<li>Il y a <span id="timer3">10</span> secondes</li>
	</ul>
</body>
</html>

Il faudrait regarder le code source pour voir si le code PHP a bien créé la liste.
En fait, le $i n'était pas incrémenté dans le foreach de l'exemple que tu m'as montré plus haut Smiley ravi !

J'essaie maintenant de modifier le script pour qu'il affiche des secondes quand $timediff < 60, des minutes quand 60=<$timediff < 60*60, etc. Pour l'affichage en seconde et minute par exemple, j'ai mis après la boucle while:

if(val<60){
			setInterval( 
                function(){ 
                    var i; 
                    for(i in msgInfos){ 
                        msgInfos[ i ][ 1 ]++; 
                        msgInfos[ i ][ 0 ].innerHTML=msgInfos[ i ][ 1 ]+'secondes'; 
                    } 
                },1000 
            );
}else if (val<3600){
			setInterval( 
                function(){ 
                    var i; 
                    for(i in msgInfos){ 
                        msgInfos[ i ][ 1 ]++; 
                        msgInfos[ i ][ 0 ].innerHTML=msgInfos[ i ][ 1 ]%60+' minutes'; 
                    } 
                },60000 
            );


Mais je rentre pas dans la boucle Smiley fache
Oui désolé, n'ayant pas testé le code PHP, je n'ai pas remarqué l'oubli.

Le code ci-dessous devrait le faire.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Essai</title>
	<script type="text/javascript">//<![CDATA[
		var msgInfos=[];

		window.onload=function(){
			var i=1,elt,val;
			while(elt=document.getElementById('timer'+i)){
				val=elt.firstChild.nodeValue;
				msgInfos[i++]=[elt,val];
			}
			setInterval(
				function(){
					var i,v,j,h,m,s,t;
					for(i in msgInfos){
						msgInfos[ i ][1]++;
						v=msgInfos[ i ][1];

						j=Math.floor(v/86400);
						h=(Math.floor(v/3600))%24;
						m=(Math.floor(v/60))%60;
						s=v %60;
						t='';

						if(m>0)t=m+' minute'+((m>1)?'s':'');
						if(h>0)t=h+' heure'+((h>1)?'s':'')+((m>0)?', ':'')+t;
						if(j>0)t=j+' jour'+((j>1)?'s':'')+((t!='')?', ':'')+t;
						if(s>0)t=((t!='')?t+' et ':'')+s+' seconde'+((s!=1)?'s':'');

						msgInfos[ i ][0].innerHTML=t;
					}
				},1000
			);
		}
		//]]>
	</script>
</head>
<body>
	<!-- Exemple de liste créée dynamiquement -->
	<ul>
		<li>Il y a <span id="timer1">0</span></li>
		<li>Il y a <span id="timer2">60</span></li>
		<li>Il y a <span id="timer3">3600</span></li>
		<li>Il y a <span id="timer4">7200</span></li>
		<li>Il y a <span id="timer5">86400</span></li>
	</ul>
</body>
</html>

Modifié par Eric2A (07 Aug 2011 - 03:05)
Sujet clos
Aller à