Alterner le contenu d'un Div

02 août 2016, 18:08

Bonjour à tous,

(désolé si je suis pas dans la bonne section)

Depuis une page Php, je récupère une "config" dans ma base mysql pour afficher du contenu qui s'alterne tout seul.

Exemple:
Catégorie RDV/ 120 (secondes)
Catégorie news/ 60(secondes)
Catégorie photo/ 180(secondes)
Catégorie video/ 630(secondes)

Je récupérer ces données dans les variables de $_SESSION pour toujours les avoirs sur ma page. (Dit moi si je fait une erreur).
Mais je bloque sur comment insérer cela dans mon javascript /faire alterner ou bien insérer dans mon div (en ajax) le contenu a chaque fois.

Exemple: J'affiche dans mon div les RDV au bout de 2 min je fait afficher les news etc... et une fois au bout cela repart au début.

Auriez-vous des pistes à m aiguiller vers quoi je doit regarder ?

merci d'avance pour votre aide

guigui69

03 août 2016, 14:54

salut,

il existe en javascript la fonction settimeout

tu peux t'inspirer de ce que j'ai ici pour faire ton système.

sur le principe, il te faut en js un tableau avec ta "config". a chaque timeout il faut que tu prennes l'élément, suivant pour l'afficher et que tu règles le timeout a la valeur de la conf courante

le plus c'est une fonction Js appelée sur le onload du body qui va prendre le info et utiliser le setTimeOut qui appelera cette même fonction avec l'index suivant.
Pense a vérifier si tu arrives arrive au dernière élément du tableau il faut que tu retournes au premier

@+

ps : vu que tu demande une solution JS tu es dans le bon forum

05 août 2016, 10:03

Bonjour Moogli,

merci pour ta réponse.

Comme tu l'indique je dois créer un tableau (j'y avais penser mais je ne sais pas comment le mettre en forme)

voici mes données que je récupéré de ma base mysql et que je met en $_SESSION:

Code : Tout sélectionner

    [rdv_ate] => 1
    [time_ate] => 120
    [news] => 0
    [time_news] => 120
    [planetvo] => 0
    [time_planetvo] => 120
    [video] => 0
    [time_video] => 120

- 1 c'est activé// 0 on affiche pas

rdv /news/ planetvo/video se sont les "catégories" que je doit alterner et

Code : Tout sélectionner

time_....

c'est le temps en seconde. (Il est donc possible d'avoir les 4 catégories ou bien une seule ou deux)

- comment faire passer/transférer mes données de $_SESSION vers un tableau JS et en plus avec le time en paramètre?

- Une question Javascript, j'arrive à afficher ma video/à la démarrer en automatique mais comment faire pour lire plusieurs video à la suite. Car je vais avoir des vidéos de 30-40 secondes et je n'ai pas trouver de propriété en html pour dire de lire plusieurs vidéos à la suite.

Merci pour ton aide

guigui69

05 août 2016, 11:06

Code : Tout sélectionner

<script type="text/javascript">
var index = new Array();
var colonne0 = new Array();
var colonne1 = new Array();
var test = new Array(index,colonne0,colonne1);
<?php 
$index=0;
if(ISSET($_SESSION['rdv_ate']) && $_SESSION['rdv_ate']=1)
	{
		
		echo '
		index="'.$index.'";
		colonne0="rdv";
		colonne1="'.$_SESSION['time_ate'].'";';
	$index=$index+1;
	} 
	if(ISSET($_SESSION['news']) && $_SESSION['news']=1)
	{
			echo '
		index="'.$index.'";
		colonne0="news";
		colonne1="'.$_SESSION['time_news'].'";';
	$index=$index+1;
	}
	if(ISSET($_SESSION['planetvo']) && $_SESSION['planetvo']=1)
	{
				echo '
		index="'.$index.'";
		colonne0="planetvo";
		colonne1="'.$_SESSION['time_planetvo'].'";';
	$index=$index+1;
	} 
	if(ISSET($_SESSION['video']) && $_SESSION['video']=1)
	{ 
				echo '
		index="'.$index.'";
		colonne0="video";
		colonne1="'.$_SESSION['time_video'].'";';
	$index=$index+1;
	} 
	?>
	alert(test);

Voila le code que j'essai de faire pour creer un array en javascript.
Mon idée est qu'il soit sous la forme
index/nom categorie/time.

Est-ce je part de la bonne manière ou bien faut-il que je y repenser différemment?

guigui69

05 août 2016, 12:04

Re,
J'ai refait un tableau:

Code : Tout sélectionner


var index = new Array();

		index[0]="rdv|120";
				
		index[1]="planetvo|120";	
	for(var iI in index)
			{
				document.write('<p>Valeur' + iI + ' = ' + index[iI] +  '</p>');
			}
			document.write('<p>Le tableau comprend ' + index.length + ' valeurs.</p>');
	alert(test);

// var test= Math.floor(Math.random() * (4 - 1 +1)) + 1;

Avec Indice + information que j'ai besoin.

Comment faire la boucle et utiliser la fonction timeout pour passer à la ligne suivante?

05 août 2016, 12:44

alors pour le coté affichage des données de php vers JS.
il faut juste que php affiche du js valide.
donc

<?php
 echo <<<js
var data = [];
// itération sur ton tableau de session pour la ligne suivante
data.push({nom : 'rdv_ate', temps :120})
js;

exemple basique tu peux y ajouter autant de ligne que tu veux. ça sert à rien d'y mettre les trucs que tu veux pas afficher

tu peux bien sur construire le tableau JS en plusieurs fois (par exemple par itération dur ton tableau de session) le but c'est qu'au final tu ais affiché du JS valide

pour le reste. n'utilise pas de données structurées ainsi ça sert à rien un beau tableau de tableau parlant c'est plus simple a comprendre, ou mieux utilise un objet qui sera plus clair

il faut une fonction qui prend en paramètre ce qu'il doit afficher

function display(data) { // l'affichage c'est toi qui voit
 }

Il faut jouer cette fonction toutes les x secondes sachant que x est définie dans le paramètre data

function display(data) { 
// l'affichage c'est toi qui voit
setTimeout( function(){
       display()
    }, data['temp']);
 }

la du coup on ne sais pas trop comment savoir d'où viennent les données.
en supposant que ton tableau "data" soit global il suffit de passer l'index de l'élément suivant à afficher en paramètre de la fonction

function display(index) { 
var current = data[index];
// l'affichage c'est toi qui voit
next = index+1;
// on prévois qu'il faut revenir au début si on est à la fin du tableau
if(index +1 > data.length){
    next = 0;
}
setTimeout( function(){
       display(next)
    }, current.temps);
 }

bien entendu quand la page est prête il faut lancer la première exécution : display(0).
dernière chose pense que le second paramètre de setTimeout doit être des millisecondes du coup va falloir surement multiplier par mille ce que tu as dans tes données d'origine

:

@+

05 août 2016, 15:06

Merci moogli pour ton aide.

Entre temps j'avais creer un tableau JS comme ceci (resultat transformer en php)

Code : Tout sélectionner

var index = new Array();

		index[0]="agenda.php|rdv|120";
		index[1]="news.php|news|120";
		index[2]="planetvo.php|planetvo|120";	
		index[3]="video.php|video|120";

J’essaie de comprend le code

Dans ton message tu parle de function display(data) et de function display(index) c'est deux fonction différent (ou bien c'est pour illustrer etape par etape)?Il y en faut bien qu'une seule

Pour appeler telle ou telle affichage je voulais utiliser une fonction ajax comme ci-dessous: (ou je changerai les variable en fonction de)

Code : Tout sélectionner

   $.ajax({
   type: "POST",
   url: "./agenda.php",
   data: "idauteur="+$("#societe_icardms").val()+"&idauteur2="+$("#atelier_icardms").val(),
   success: function(html){
    $("#affichage_agenda").html(html);
	$('#affichage_agenda').css('display', '');
  }
});

Merci d'avance pour tes explications

guigui69

06 août 2016, 10:51

re bonjour Moogli,

Merci moogli j'ai pu tester ton code et je reviens lundi pour te montrer le code

j'aurai surement d'autre question

08 août 2016, 14:59

Bonjour Moogli,

Grace à toi j'ai pu avancer sur mon code:

Code : Tout sélectionner

function display(index) { 
document.getElementById("top").style.animation="cf3FadeInOut 4s ease-in-out 0s infinite alternate";



				var regSeparator = new RegExp('[|]+','g');
				var eachElement = data[index].split(regSeparator);
				var url=eachElement[0];
				////////var time=eachElement[2]*1000;
				var time= 10*1000;
				var categorie=eachElement[1];
var ss_config_id=eachElement[3];
// l'affichage c'est toi qui voit
var element = document.getElementById("top");
element.addEventListener("transitionend", $.ajax({
											type: "POST",
											url: "ajax/"+url,
											data: "ss_config_id="+ss_config_id,
											success: function(html)
											{

											$("#affichage").html(html);
											}
											}), false);


//

next = index+1;
// on prévois qu'il faut revenir au début si on est à la fin du tableau
if(index +1 > data.length-1){
    next = 0;
}
setTimeout( function(){
       display(next)
    }, time);
 }

La je suis sur une de mes pages que j'appel en ajax.

Je récupéré les informations de ma base MYSQL (texte + 4 photos)

Code : Tout sélectionner

SELECT 
sspv.Marque as Marque, SUBSTRING(Modele,1,20) as Modele, Famille, 
SUBSTRING(Version,1,20) as Version, EnergieLibelle, Kilometrage, 
BoiteLibelle, CONCAT(LEFT(Date1Mec, 2),'/',substr(Date1Mec,4,2),'/', RIGHT(Date1Mec,4)) as Date1Mec, 
Annee, Couleur,PuissanceFiscale,Couleur, PrixVenteTTC, EquipementsSerieEtOption, Photos
FROM `ss_planetvo_veh`  sspv
INNER JOIN ss_planetvo_concession sspc on sspc.id_codepvo= sspv.CodePvo
INNER JOIN ss_planetvo_concession_marque sspcm on sspcm.id_planetvo_concession=sspc.id_planetvo_concession AND sspv.Marque=sspcm.marque
WHERE Photos <>'' AND ss_config_id='".$_POST["ss_config_id"]."' ORDER BY RAND() LIMIT 1

J'arrive à faire défiler les photos

Code : Tout sélectionner

<script type="text/javascript">
function randomImg(){
   var tabImg = new Array();tabImg[0]  = "155937807239_01_hd.jpg";tabImg[1]  = "155937807239_02_hd.jpg";tabImg[2]  = "155937807239_03_hd.jpg";tabImg[3]  = "155937807239_04_hd.jpg";tabImg[4]  = "155937807239_05_hd.jpg";document.getElementById('image').src += tabImg[Math.round(Math.random()*4)];
}
</script><div id="image">
<div class="slideshowpvo"><ul><li><img src="../photos/155937807239_01_hd.jpg" alt=""  class="coin" width="800" height="600"/></li><li><img src="../photos/155937807239_02_hd.jpg" alt=""  class="coin" width="800" height="600"/></li><li><img src="../photos/155937807239_03_hd.jpg" alt=""  class="coin" width="800" height="600"/></li><li><img src="../photos/155937807239_04_hd.jpg" alt=""  class="coin" width="800" height="600"/></li><li><img src="../photos/155937807239_05_hd.jpg" alt=""  class="coin" width="800" height="600"/></li></ul>
</div>
</div> <table id="enteteplanetvo">
</div>   <script type="text/javascript">  
	alert(document.getElementById("image").getElementsByTagName('img').length-1);
   
    I = 0 ;
     Imax = document.getElementById("image").getElementsByTagName('img').length-1 ;
     setTimeout(suivante, 2000) ;
    
     function suivante()
     {
     document.getElementById("image").getElementsByTagName('img')[I].style.display = "none" ;
     if ( I < Imax )
          I++;
     else
          I=0;    
     document.getElementById("image").getElementsByTagName('img')[I].style.display = "block";
     setTimeout(suivante, 2000) ;
     }

    </script>

Dans le requête je demande une information au hasard (RAND limit 1) et je voudrais dire dans mon javascript quand j'ai fait défiler les 4 images il ré-exécuter la partie ajax pour récupérer de nouveau une nouvelle information de ma base mysql.

Pourrais-tu m’éclairer vers quoi je doit regarder comme code pour arrive à cela.

guigui69

Alterner le contenu d'un Div

Qui est en ligne