cas d'utilisation javascript pour les distinctions de Magdales

Code PHP :
<?php 

<!doctype html>

<html>

  <head>

    <script type="text/javascript" src="./scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="./scripts/jquery.timers-1.2.js"></script>



<script type="text/javascript">

$(document).ready(function() {

    var compteur = -1;

    var nb_distinction = 5;

    

//    var texte_id_distinction = "";

    var tableau_data = new Array();

    tableau_data[0] = 'test'; // Pourquoi devons nous initier cette variable ??? En tous les cas firebug semble pas apprecier sans.





    // Cette boucle tourne toutes les 5 secondes. Son but, afficher une liste de joueur avec des distinctions. Les données sont récupéré au début via de l'AJAX. Lorsque toutes les informations sont affichées, on va rechercher de la nouvelle donnée.'



    $(document).everyTime(5000, function() { // 5000 = 5 secondes

        if (compteur >= nb_distinction) // permet d'éviter un appel systèmatique à AJAX'

        {

            compteur = 0;

        }

        

        if (compteur == -1 || compteur >= nb_distinction)

        {

            $.getJSON("ajax_liste_distinction_desc.php", {}, function(data) {

                // format result

                texte_id_distinction = "";



                tableau_data = data;

                

/*                texte_id_distinction = tableau_data.nb ;

                i = 2;

                texte_id_distinction = tableau_data[i].id_distinction_joueur ;*/



                nb_distinction = tableau_data.nb ;



                // ce message est à titre informatif ... il disparaitra par la suite

                $("#tableau_dynamique").html('<br>' + compteur + ' vs ' + nb_distinction + ' Recherche Information via AJAJSON . Nb résultat = ' +  tableau_data.nb + ' test = ' + tableau_data[0].id_distinction_joueur);

                compteur = 0;

                $("#premier_element").html('<BR> ori 1 Le sage : ' + tableau_data[compteur].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur].nom_distinction + '<br>');

                $("#deuxieme_element").html('<BR> ori 2 Le sage : ' + tableau_data[compteur+1].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur+1].nom_distinction + '<br>');

                $("#premier_element").show() ;

                $("#deuxieme_element").show() ;

                compteur =1 ;

            }

            );

        }

        else

        {

            $("#tableau_dynamique").html('<br> Traitement des données ! ' + compteur + ' vs ' + nb_distinction + ' Le sage : ' + tableau_data[compteur].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur].nom_distinction );

            

            $("#premier_element").slideUp(1000);

            $(document).delay(1000);

            

            

            $("#premier_element").hide() ;



            // Premier élément prend le texte du 2eme.

            $("#premier_element").html('<BR> 1 numéro ' + tableau_data[compteur].id_distinction_joueur  + ' Le sage  : ' + tableau_data[compteur].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur].nom_distinction + '<br>');



            // on échange la position de 1 et 2



            $("#premier_element").show() ;

//            $("#deuxieme_element").hide() ;



            // maintenant que 2 est caché, on écrit du texte dedans :

            if ( (compteur + 1) < nb_distinction)

            {

                $("#deuxieme_element").html('<BR> 2 numéro ' + tableau_data[compteur+1].id_distinction_joueur  + ' Le sage : ' + tableau_data[compteur+1].nom_joueur  + ' a reçu la distinction ' + tableau_data[compteur+1].nom_distinction + '<br>');

                

                // on affiche 2 tout doucement ...

                $("#deuxieme_element").fadeIn(2000);

                $("#deuxieme_element").delay(2000);

//                $("#premier_element").stop();

            }

            else

            {

                $("#deuxieme_element").html('<BR> Fin compteur !!! <br>');

            }



            compteur ++ ;

        }

        

    }); 



});





</script>



</head>

<body>

<h1>Page de test AJAX</h1>



<div id="tableau_dynamique">Info : Les quelques premières lignes seront pré-chargée en PHP. Ce bloc sera remplacé par Javascript dans quelques secondes.</div>



<div id="premier_element">toto a truc</div>

<div id="deuxieme_element">titi a chose</div>





</body>

</html>