Discussion :

[Otacon95]

Salut tout le monde, je suis tout nouveau sur ce forum donc désolé si je me suis trompé de section ^^
je réalise actuellement un site, comme chaque site il y a un contenu, mais il y a aussi une div appelé "flash" (pour information flash), dans la base de donnée il peut y avoir une, deux... X flash et ce que je souhaiterais, c'est que toutes les flash s'affichent dans le coin "flash" a intervalle régulière
Problème : j'arrive a afficher les info flash avec une intervalle, MAIS je suis obligé de cliquer sur chaque info flash (j'ai fais une boucle foreach en php pour afficher leurs id) ce qui signifie qu'elles ne se chargent pas automatiquement, autre problème, l'intervalle n'est pas régulière, j'ai crus voir que si je fixais une intervalle de 8secondes, pour 3 flash disponible, 2 flash feraient leurs apparitions en 1secondes chacune et la dernière prendrait les 8secondes restantes. J'espère avoir été le plus clair possible en ce qui concerne le contexte ^^

Maintenant un peu de code :

Le code JS qui me permet de faire ce qui a déjà été réalisé :

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
36
37
38
39
40
41
42
43
<script type="text/javascript" charset="UTF-8">
 
    function getRequeteHttp(){
 
        var xhr=null;
        if (window.XMLHttpRequest){ //navigateurs non MS
            xhr=new XMLHttpRequest();
        }
        else
            if (window.ActiveXObject){ //versions de MS IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
        else {
            alert("navigateur non comptatible Ajax...");
        }
        return xhr;
    }
 
    function recevoirReponse(xhr){
        if (xhr.readyState == 4 && xhr.status==200) {
            interval = setTimeout(function(){changeMessage(xhr.responseText)},10000); //setinterval
        }
    }
 
    function getFlash(idFlash){
        var xhr = getRequeteHttp();
        xhr.open("POST", "vues/v_chercherFlash.php", true);
        xhr.onreadystatechange = function(){
            recevoirReponse(xhr);
        }
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("idFlash="+ idFlash);
    }
 
    function changeMessage(xhr){
 
        texte=xhr.split('/');
        document.getElementById("libelle").innerHTML=texte[1];
        document.getElementById("Contenu").innerHTML=texte[2];
        document.getElementById("dateD").innerHTML=texte[3];
        document.getElementById("dateF").innerHTML=texte[4];
    }
</script>

La partie Flash qui me permet de réaliser l'affichage :

Code php :

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
<div id="flash">
    <span id="dateD"></span>
    <span id="dateF"></span><br>
    <span id="libelle"></span><br>
    <span id="Contenu"></span><br>
 
    <?php
    $i = 1;
    foreach ($desFlash as $uneFlash) {
        $id = $uneFlash['id'];
        ?>
        <a href='#' onclick='getFlash(<?php echo $id; ?>)'><?php echo $i; ?></a>
 
        <?php
        $i++;
    }
    ?>
</div>

Enfin, si ça peut aider, la partie qui fabrique la ligne flash :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
require_once '../include/class.pdoamicales.inc.php';
$pdo = PdoAmicales::getPdoAmicales();
        $idFlash = $_POST['idFlash'];
        $flash=$pdo->getLesFlash($idFlash);
 
        echo $flash[0]['id'];
 
        if (count($flash) != 0) {
            echo $flash[0]['id'] . "/" . $flash[0]['libelle'] . "/" . $flash[0]['contenu'] . "/"
            . $flash[0]['dateD'] . "/" . $flash[0]['dateF'] . "/";
        }

j'avais réalisé une recherche sur le net, mais rien ne correspondant a mon cas précis,
je vous remercie d'avances pour vos réponses et désolé si j'ai mal utilisé les balises!

[malgache]

Salut,

J'ai un peu de mal à tout comprendre ^^. Mais pour tes flash info, ton contenu à afficher il est bien récupérer par la fonction getFlash() ?

Pour ton intervalle tu parle de celui qui tu met dans setTimeout?

[Otacon95]

Enfaite, pour l'instant j'ai 3 flash, avec la boucle foreach, ça m'affiche :
1 2 3
Chacun a son value de flash, le problème, c'est que ça m'affiche que 1 2 3 alors que je voudrais que ça m'affiche automatiquement le contenu de la flash 1, après 4secondes par exemple le contenu de la flash 2, 4secondes après le contenu de la flash 3 et on revient a la flash 1.
Seulement, pour l'affichage d'une flash, je dois cliquer dessus, c'est le premier problème.
Le second problème est la durée d'affichage : les 3 flash ne sont pas affiché avec une même durée, une va être affiché 8secondes, et les deux autres seront affiché 1seconde chacune, le temps est respecté je crois, il affiche bien les 3 flash pour une durée de 10secondes, mais le temps d'affichage n'est pas équilibré. Pour complexifier la chose, il peut y avoir 2 flash, comme il peut y en avoir 8

[malgache]

Okok, alors en faite, ça t'affiche 1 2 et 3 parce que tu fais uniquement un echo de $i, et le contenu tu le charge uniquement au onclick. il faut revoir le fonctionnement. Moi je ferai un truc de ce style (je te fais un exemple en mode léger)

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
 
<script type="text/javascript">
 
function getFlash(idFlash)
{
   // Récupère tous les flash
   // Tu récupère le nombre total de flash et tu affecte cette valeur à idMax
   afficheFlash(listeFlash,0);        
}
 
function afficheFlash(listeFlash,idFlash)
{
  // J'utilise la syntaxe jQuery j'utilise ça le plus souvent et j'ai pas en tête la syntaxe native à JS. C'est fort possible que je me trompe aussi dans la syntaxe pour extraire les données, tout dépend comment est formaté ton retour.
// En gros, je vide chaque span, puis je met la nouvelle valeur en fonction de son id.
   $("#dateD").empty().html(listeFlash[idFlash][dateD]);
   $("#dateF").empty().html(listeFlash[idFlash][dateF]);
   $("#libelle").empty().html(listeFlash[idFlash][libelle]);
   $("#Contenu").empty().html(listeFlash[idFlash][Contenu]);
   if(idFlash == idMax)
     idFlash = 0;
   else
     idFlash++;
   setTimeout(afficheFlash(listeFlash,idFlash),10000);
}
</script>
<div id="flash">
    <span id="dateD"></span>
    <span id="dateF"></span><br>
    <span id="libelle"></span><br>
    <span id="Contenu"></span><br>
</div>

[Otacon95]

Je te remercie de ta réponse, je vais essayer et je te tiens au courant

j'y repense, mais je ne connais rien au Jquery :s j'ai fais de l'ajax cette année,

[malgache]

Tu dois avoir des équivalent en natif. Je sais que html tu peux le remplacer par innerHTML mais empty je sais pas du tout l'équivalent ...