Affichage valeur Ajax [Résolu]

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

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 :

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 :

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 :

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

[Otacon95]

Sinon j'avais pensé a autre chose,
charger toutes les flash avec ma fonction php (donc je n'envoie pas d'id)
je fais un premier split / pour différencier les différentes parties d'une flash et un autre split - pour différencier les flash
mais je crois que je me torture un peu trop l'esprit, non?

[malgache]

Possible que tu te torture l'esprit ^^.

J'ai un peu relu ce que t'as fais, je pense que si tu utilise ta fonction getLesFlash, tu encode en JSON pour que ce soit léger et tu le renvois à ta fonction ajax, et après t'as plus qu'à traiter par rapport à l'id (si tes id fonctionnent comme des indices de tableau).

Je sais pas si je me suis bien expliqué sur la méthode que j'aurai utilisé ^^

[Otacon95]

je pars sur une nouvelle idée qui devrait être moins prise de tête

Code pour l'affichage (qui n'affiche pas encore^^) :

Code html :

1
2
3
4
5
6
7
<div id="flash">
    <span id="dateD"></span>
    <span id="dateF"></span><br>
    <span id="libelle"></span><br>
    <span id="Contenu"></span><br>
    <a href='#' onload='getFlash()'></a>
</div>

Le script php qui réupère toutes les flash (les champs sont séparés par des / et les flash par des --)

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
/**
 * Dans le même dossier que le script Ajax (pour les flash). 
 */
 
require_once '../include/class.pdoamicales.inc.php';
$pdo = PdoAmicales::getPdoAmicales();
        $lesFlash=$pdo->getDesFlash(); //on récupère toutes les flash
 
        if (count($flash) != 0) {
            foreach($lesFlash as $flash)//on parcourt toutes les flash
 
            echo $flash[0]['id'] . "/" . $flash[0]['libelle'] . "/" . $flash[0]['contenu'] . "/"
            . $flash[0]['dateD'] . "/" . $flash[0]['dateF'] . "--";//on affecte a toutes les flash un contenu séparé par des / , et les flash séparé entre elle par des --
 
        }
?>

Enfin le code JS :

Code :

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
44
45
46
47
48
49
50
51
52
53
<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(){
        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(null);
    }
 
    function changeMessage(xhr){
        var i=0;
        var y=1;
        flash=xhr.split('--');//on sépare les flash
        while(flash[i]=!null){//tant qu'on a une flash ..
            texte=flash[i].split('/');//on sépare les champs de la flash
 
            document.getElementById("libelle").innerHTML=texte[y];
            y++;
            document.getElementById("Contenu").innerHTML=texte[y];
            y++;
            document.getElementById("dateD").innerHTML=texte[y];
            y++;
            document.getElementById("dateF").innerHTML=texte[y];
            y=y+2;
            i++;
        }
    }
</script>

Edit: Enfaite je viens de rajouter onload au body.. et j'ai fais un alert, j'ai modifié le petit truc qui n'allait pas en php, j'ai fais un alert de xhr , et j'obtient... l'id de chaque flash, exemple 6/6/6/6/6-8/8/8/8/8-9/9/9/9/9, je crois qu'on y est presque..


Edit : je vous tiens au courant des avancées quand même... le onload se fait bien, mes split se font bien, le problème, c'est que mes <span> affichent undifined SAUF si je fais un alert quelconque... a ce moment la ça m'affiche bien le résultat, sauf que je n'ai pas vraiment envie que l'utilisateur ai a se taper la boucle de flash dés son arrivé esur le site..

[Otacon95]

Voici la dernière version du script :

Code :

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
    function changeMessage(xhr){
 
        var i=0;
        var y=1;
        var t;
 
        flash=xhr.split('--');//les flash sont splité
 
        for(t=0; t<flash.length-1;t++){//on parcourt les flash
 
         texte=flash[i].split('/');//notre flash est splité
 
        var horloge = new Date();//instanciation d'une date'
        var time = horloge.getTime();//on veut le temps en ms depuis 1970
        var temps = horloge.getTime();//premiere date de référence temps
 
        while(5000>(temps-time)){//boucle affichage
            var horlogeTps = new Date();//on re instancie une nouvelle date, la date faite en dehor de la boucle n'est plus fiable'
            temps = horlogeTps.getTime();//on affecte a temps sa nouvelle valeur
            //alert("dans la boucle "+ (temps-time));
            alert(temps);
 
 
            document.getElementById("libelle").innerHTML=texte[1];
            y++;
            document.getElementById("Contenu").innerHTML=texte[2];
            y++;
            document.getElementById("dateD").innerHTML=texte[3];
            y++;
            document.getElementById("dateF").innerHTML=texte[4];
            //5000ms, on sort de la boucle while, mais logiquement on retourne en haut de la boucle for
        }
 
    }            
}

Le problème : c'est que les valeurs changent uniquement avec des alertes, par exemple, si j’enlève alert(temps); firefox va tout d'abord buguer, afficher les valeurs la ou il le faut sur les span et m'annoncer un message comme quoi le script a planté.. continuer ou stopper, même si j fais continuer... le script ne se relance pas,
Ensuite, avec le alert(temps) cette fois, il semblerait que les informations s'actualisent environ toutes les 5secondes, mais ne boucle pas a l'infini( arrivé a la dernière flash, le script s'arrête), c'est pas encore bon mais y a du mieux

[sdamart]

Quelque critique si tu me le permet :
Tu utilise trop de tableau dans tout les sens au bout d'un moment tu va forcément finir par t'y perdre. tu part dans la bonne direction néanmoins.
Le JavaScript possède un outil puissant le JSON

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
var _a=xhr.split('--');
var _array=[];
for(var fl in a){
if(fl!=undefined)//à cause du -- de trop à la fin 
var flash={
libelle:fl.split('#')[1],
contenu:fl.split('#')[2],
dateD:fl.split('#')[3],
dateF:fl.split('#')[4]
}
_array.push(flash);
 
}

tu récupère en AJAX tout les flashs et tu les stock dans un tableau JS et pour les récupèrer, il suffit d'utiliser la syntaxe

Code :

_array[index].libelle

Voila il ne reste plus qu'a itérer.
Là encore, tu partais dans la bonne direction mais jamais tu ne ré-itére la fonction donc elle tourne pas en boucle.

Exemple

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//le tableau de flashs est chargé
var interval={}//stocker le setTimeout
index=0;//index pour le parcours
function refreshFlashView(){
clearTimeout(interval)//ainsi en cas de pépin, l'erreur ne tournera pas en boucle
  document.getElementById("libelle").innerHTML=_array[index].libelle;
  document.getElementById("contenu").innerHTML=_array[index].contenu;
[...]
if(index+1<_array.length){
 index++;
}else
index=0;
interval=setTimeout(refreshFlashView,1000);
}

Voila logiquement ça doit résoudre ton problème.

[Otacon95]

Je débute en javascript, je l'apprend en cours, je suis pour l'instant limité a ajax, j'ai déjà entendu parler de Json et de Jquery qui semblent être de formidable outils, mais je ne les connais pas (encore).
Je viens quand même de regarder quelques exemples sur le net..
ça me fais un peu penser a DOM et a l'utilisation du XML, non?

[Otacon95]

Pour le Json, je ne vois pas comment l'adapter a mon script,
De plus, après avoir de nouveau testé le script, enfaite il plante, et me propose de continuer ou d'arrêter le script (difficile a dire si niveau algo il fonctionne), du fait qu'il plante, il affiche directement la dernière valeur

Edit : j'ai testé le script avec l'outil Ardoise Javascript et j'obtient ça en commentaire après la tentative d'éxécution :
/*
Exception: syntax error
@Scratchpad:1
*/
/*
undefined
*/

[sdamart]

Pour le JSON, il s'agit d'un système de notation rapide pour générer des objet à la volée.
En JavaScript (comme dans n'importe quel langage) il faut éviter les codes trop lourd
Si j'écris

Code :

1
2
3
4
5
6
var _a=new Array();
 _a[0][0]="libellé1";
_a[0][1]="Desc_1";
_a[0][2]="info1";
_a[0][3]="info12";
[...]

On constate 4 lignes de code pour chaque item: ça fait un peu lourd
Alors qu'en JSON

Code :

1
2
3
4
var _a=[
["libelle1","desc_1","info1",info12"],
[...]
]

C'est plus synthétique mais j'ai intérêt à apprendre l'index des information si je veux modifier mon code plus loin
Si j'écris

Code :

1
2
3
4
var _a=[
{libelle:"libelle1",descripif:"desc_1",info1:"info1",info2:info12"},
[...]
]

Chaque occurrence du tableau n'est plus un tableau mais un objet dédié.
Donc je peu appeler

Code :

_a[0].libelle

qui est plus clair que

Code :

_a[0][0]

Dans ton dernier code tu soirt un tableau à deux dimensions
La première constitue l'ensemble de tes flashs info et la seconde les flashs info en eux même
Plus tôt que de jongler avec les index des tableau mieux vaut dédié des champs

Code :

1
2
3
4
5
6
7
8
9
var _a=[]//je déclare un tableau
for(var flash in xhr.split('--')){//pour chaque occurrence du tableau 
var item={//je déclare un objet qui représente le flash info
libelle:flash.split('/')[1]//je créer un attribut libellé 
[...] //ainsi de suite
}
//j'intégre l'objet dans mon tableau
_a.push(item);
}

Mais comme tu peux le constater, le JSON à pas beaucoup d'intérêt.
Et si on décidé de récupérer le JSON directement du serveur

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
require_once '../include/class.pdoamicales.inc.php';
$pdo = PdoAmicales::getPdoAmicales();
        $lesFlash=$pdo->getDesFlash(); //on récupère toutes les flash
       $jsonResult=array();
        if (count($flash) != 0) {
            foreach($lesFlash as $flash)//on parcourt toutes les flash
 
             $jsonResult[]="{ID:\"". $flash[0]['id'] . "\",libelle:\"" . $flash[0]['libelle'] . "\",contenu:\"" . $flash[0]['contenu'] . "\",dateD:\""
            . $flash[0]['dateD'] . "\",dateF" . $flash[0]['dateF'] . "}";//On inserer un objet JSON formater au tableau
 
        }
echo "[".implode(',',$jsonResult)."]";//on affiche les occurrences tableau sous forme de chaine de caractère séparer par une "," encadré par des"[]" pour symboliser le tableau
?>

Coté JS tu trouvera

Code :

var _a=eval('('+xhr+')');

et fini

[Otacon95]

Enfaite la je suis perdu, voici le code actuel :

v_chercherFlash.php :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
/**
 * Dans le même dossier que le script Ajax (pour les flash). 
 */
 
require_once '../include/class.pdoamicales.inc.php';
$pdo = PdoAmicales::getPdoAmicales();
        $lesFlash=$pdo->getDesFlash(); //on récupère toutes les flash
 
        if (count($lesFlash) != 0) {
            foreach($lesFlash as $flash)//on parcourt toutes les flash
 
            echo $flash['id'] . "/" . $flash['libelle'] . "/" . $flash['contenu'] . "/"
            . $flash['dateD'] . "/" . $flash['dateF'] . "--";//on affecte a toutes les flash un contenu séparé par des / , et les flash séparé entre elle par des --
 
        }
?>

le code js de v_message.php :

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<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 getFlash(){
        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(null);
    }
 
    function recevoirReponse(xhr){
        if (xhr.readyState == 4 && xhr.status==200) {
            changeMessage(xhr.responseText); //setinterval
        }
    }
 
 
 
    function changeMessage(xhr){
 
        var i=0;
        var y=1;
        var t;
 
        flash=xhr.split('--');//les flash sont splité
 
        for(i=0; i<flash.length-1;i++){//on parcourt les flash
 
 
 
            texte=flash[i].split('/');//notre flash est splité
            alert(flash[i]);
            var horloge = new Date();//instanciation d'une date'
            var time = horloge.getTime();//on veut le temps en ms depuis 1970
            var temps = horloge.getTime();//premiere date de référence temps
 
            while(5000>(temps-time)){//boucle affichage
                var horlogeTps = new Date();//on re instancie une nouvelle date, la date faite en dehor de la boucle n'est plus fiable'
                temps = horlogeTps.getTime();//on affecte a temps sa nouvelle valeur
                //alert("dans la boucle "+ (temps-time));
 
 
                document.getElementById("libelle").innerHTML=texte[1];
                y++;
                document.getElementById("Contenu").innerHTML=texte[2];
                y++;
                document.getElementById("dateD").innerHTML=texte[3];
                y++;
                document.getElementById("dateF").innerHTML=texte[4];
                //5000ms, on sort de la boucle while, mais logiquement on retourne en haut de la boucle for
            }
 
        }            
    }
</script>

Enfaite, le code que vous me fournissez... je ne sais pas où le placer, c'est une syntaxe que je ne connais pas (encore)

[malgache]

Salut,

Je pense que t'y est presque mais il te faut juste bien réussir à récupérer toutes les données et ajusté comme il faut le changement auto.

Une possible solution, à arranger et corriger. Ca ressemble beaucoup à la première solution que je t'ai proposé mais je pense que c'est l'approche à avoir

Code php :

1
2
3
4
5
6
7
8
9
10
<?php
/**
 * Dans le même dossier que le script Ajax (pour les flash). 
 */
 
require_once '../include/class.pdoamicales.inc.php';
$pdo = PdoAmicales::getPdoAmicales();
        $lesFlash=$pdo->getDesFlash(); //on récupère toutes les flash
        echo $lesFlash
?>

La tu renvoie ton tableau brut avec tous tes flashs

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<script type="text/javascript" charset="UTF-8">
     var idEnCours = 0;
    var idMax = 0;
    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 getFlash(){
        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(null);
    }
 
    function recevoirReponse(xhr){
        if (xhr.readyState == 4 && xhr.status==200) {
            idMax = xhr.lenght;
            changeMessage(xhr); //setinterval
        }
    }
 
 
 
function changeMessage(xhr){
   document.getElementById("libelle").innerHTML=xhr[idEnCours]['libelle'];
   document.getElementById("Contenu").innerHTML=xhr[idEnCours]['Contenu'];
   document.getElementById("dateD").innerHTML=xhr[idEnCours]['dateD'];
   document.getElementById("dateF").innerHTML=xhr[idEnCours]['dateF'];
 
   if(idEncours == idMax)
   {
       idEnCours = 0;
   }
   else
   {
      idEnCours++;
   }
   setTimeout(changeMessage(xhr),'8000');
 }
</script>

Donc en gros, tu récupère le tableau avec tous tes flash.
Tu appel une fonction pour afficher le premier flash. Ensuite on incrémente de 1 la variable idEnCours pour afficher le flash suivant quand la fonction sera rappeler. Puis ensuite tu indique que la fonction changeMessage sera rappelé au bout de 8000ms

[Otacon95]

j'ai testé le script, avec la console développeur web de firefox activé, idEnCours n'est pas défini
et typeError xhr[idEnCours] is undifined

[sdamart]

Paradoxalement, l'AJAX ce joue essentiellement coté serveur.
I.E la façon dont les données sont formatées.
Si ton serveur retourne une chaine CVS (libelle1|desc_1|12.8#libelle2|desc_2|21.8)
Il faut prévoir un script pour transformer cela coté client
exemple

Code :

1
2
3
4
5
6
7
8
9
var result=xhr.responseText//reponse du serveur
var _a=[]
for(i=0;i<result.split('#');i++){//pour chaque produit de mon tableau
 _a.push({
libelle:result[i].split('|')[0],
desc:result[i].split('|')[1],
prix:result[i].split('|')[2]
})
}

Mais voit comme cette construction est lourde.
En revenche, si ton serveur retourne une chaîne JSON
[{libelle:"libelle1",desc:"desc1",prix:12.80},{libelle:"libelle2",desc:"desc2",prix:21.80}]
Coté client c'est des vacance !

Code :

var _a=eval('('+xhr.responseText+')');

Le code que je te fournis c'est une alternative au tiens pour faciliter ton travail coté client et te permettre de te concentrer sur le setTimeout qui semble être le noeud de ton problème.

[Otacon95]

Il semblerait que ça se rapproche du but la, j'arrive a afficher les informations dans les span, après quelques secondes (prévues par le settimeout) je vois qu'il y a bien l'appel de ma fonction d'affichage, seulement, la flash suivante n'est pas affiché et j’obtiens [object HTMLDivElement] dans un alert(flash), comme ci mes flash étaient transformé lors de l'appel de la fonction

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script type="text/javascript" charset="UTF-8">
   var idEnCours = 0;
    var idMax = 0;
 
    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 getFlash(){
        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(null);
    }
 
    function recevoirReponse(xhr){
 
        if (xhr.readyState == 4 && xhr.status==200) {
            var flash=xhr.responseText;
            var ttl = flash.split("##");
            idMax = ttl.length-1;
            changeMessage(ttl); //setinterval
 
        }
    }
 
 
 
function changeMessage(flash){
alert(flash);
    texte=flash[idEnCours].split('/');
 
   document.getElementById("libelle").innerHTML=texte[0];
   document.getElementById("Contenu").innerHTML=texte[1];
   document.getElementById("dateD").innerHTML=texte[2];
   document.getElementById("dateF").innerHTML=texte[3];
   if(idEnCours == idMax-1)
   {
       idEnCours = 0;
   }
   else
   {
      idEnCours++;
   }
   alert(flash);
   setTimeout('changeMessage(flash)','3000');
 }
</script>

[Otacon95]

Le script fonctionne ! Je vous remercie tous pour votre aide importante.

Je fourni la fonction dans le cas où ça intéresserai quelqu'un plus tard :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function changeMessage(flash){
 
    texte=flash[idEnCours].split('/');
 
   document.getElementById("libelle").innerHTML=texte[0];
   document.getElementById("Contenu").innerHTML=texte[1];
   document.getElementById("dateD").innerHTML=texte[2];
   document.getElementById("dateF").innerHTML=texte[3];
   if(idEnCours == idMax-1)
   {
       idEnCours = 0;
   }
   else
   {
      idEnCours++;
   }
   setTimeout(function(){changeMessage(flash)},'5000');
 }