Afficher div en fonction d'une variable

Résolu/Fermé

Gégé - Modifié par Gégé le 12/02/2012 à 10:01
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 12 févr. 2012 à 18:18

Bonjour tout le monde,

Alors voici mon problème:

A l'aide d'une tache cron j'actualise un champ dans une table de ma base à une heure précise.

De ce changement de la valeur de mon champ: passant de "false" à "true"

Je voudrais qu'une div s'affiche sur mon site sans besoin de recharger la page.

J'espère être assez clair !

Je résume :-)

requete= envoie de la valeur "true"

donc $ma_variable="true"

Et si $ma_variable="true"

alors

ma_div est affichée

et biensur si j'envoie "false" alors ma div disparait.

Mais toujours sans besoin d'actualiser ma page biensur.

A priori de tout ce que j'ai lu cela se ferait en ajax mais j'ai du mal à comprendre comment
faire que ajax verifie en permanence la valeur de "ma_variable" et ainsi qu'il affiche ou pas ma div ???

Voilà en gros mon souci en espérant avoir été assez clair...

çà fait déjà plus de 4 jours que je planche sur le sujet et que je ne m'en sort pas...snifff

Merci BEAUCOUP par avance à tous ceux qui voudront bien m'aider !!!

A voir également:

10 réponses

Réponse 1 / 10

Gégé
Modifié par Gégé le 12/02/2012 à 10:36

Déjà merci de bien vouloir m'aider :-)

Mais en fait le souci est que je voudrais que ma div s'affiche à une heure précise,
et si je fais comme tu me dis il faudrait que je vérifie chaque seconde la valeur de ma variable pour être sur que la div s'affiche exactement au moment où la tache cron s'exécute et donc que la valeur de ma variable change !

Mon serveur serait donc surcharger de requete incessante pour connaitre la valeur de ma variable...

Il faudrait que la variable soit vérifier juste après que ma tache cron ait été exécutée...

J'espère être compréhensible.

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
12 févr. 2012 à 10:41

Déjà je suis désolé, mais je ne sait pas ce qu'est une tache cron, mais de toute façon, il faudra appeler une fonction ajax régulièrement, comme toutes les dix secondes, et c'est toute les dix secondes que tu calculeras, dans ton fichier php, si oui ou non il faudra afficher la div en fonction des condition que tu évoque.

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/02/2012 à 10:46

Au moment ou ton visiteur se rend sur ta page, tu set une variable JS avec l'heure courante. Une autre variable préalablement settée contiendra quant à elle l'heure de la prochaine vérification.

Après un petit calcul, tu peux connaitre le temps restant avant de devoir exécuter la fonction de vérification. Il ne te reste plus qu'a faire un setTimeout(function_de_verif, delai_calculé) et ton script devrait fonctionner sans surcharger le serveur =)

Gégé
Modifié par Gégé le 12/02/2012 à 10:51

Pour faire simple une tache cron permet d'automatiser par exemple le lancement d'une requete sur ton site.

Tu peux par exemple automatiser la sauvegarde de ta base de donnée tous les jours à une heure définie.

En fait moi ce que je fais c'est j'automatise une requete qui va upadater une table dans ma base de donnée à une heure précise tout simplement.

Donc une fois ma tache effectuée la valeur de ma variable à changer et c'est à ce moment là qu'il faudrait que la valeur de ma variable soit vérifier et qu'elle affiche ma div.

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 11:07

Est-ce que la réponse que je t'ai postée juste au dessus te convient ?

Gégé
Modifié par Gégé le 12/02/2012 à 11:11

Heu donc si j'ai bien compris je met tout ton code dans ma page et je met une condtion de temps "dessus"

Si par exemple je veux mon script marche que de 20h à 21h: (exemple vite fait biensur :-) )

$heure_depart=20h  
$heure_fin=21h  
$heureactuelle=date('h') 

if ( $heure_actuelle> $heure_depart  && $heure_actuelle< $heure_fin)  

alors execution du script

C'est bien çà ?

Réponse 2 / 10

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 12/02/2012 à 10:13

Salut, oui faut utiliser de l'ajax. Il faut appeler une fonction javascript sur windows.onload de ta page. Dans cette fonction il faut utiliser la fonction javascript setTimeOut qui interroge ta base de donné via un fichier php à une certaine fréquence.

http://www.siteduzero.com/tutoriel-3-4745-ajax-et-l-echange-de-donnees-en-javascript.html

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 10:34

Hello,

Je t'ai fait un script d'exemple:

Index.html:

<html>
<head>
  <title></title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <style type="text/css" media="screen">
    #status{width:100px; height:100px;}
    .status-true{background-color:green;}
    .status-false{background-color:red;}
  </style>
</head>
<body>
  Etat de la variable:
  <div id="status">
  </div>
</body>
<script type="text/javascript">
  //Namespace
  var Crawler = [];
  Crawler.app = {
    timer: null,
    //Intevral entre deux requêtes en MS
    interval: 1000,
    //Constructeur
    _initialize: function(){
      this.getStatus();
      this.timer = this.setInterval(); 
    },
    setInterval: function(){
      var self = this;
      return setInterval(function(){self.getStatus()}, self.interval);
    },
    //Appelle la page request.php
    getStatus: function(){
      $.ajax({
        url: "request.php",
        //result contient true ou false en fonction de la réponse de request.php
        success: function(result){
          //Mise a jour du div en tenant compte de la réponse
          $('#status').html(result).removeClass().addClass('status-'+result);
        }
      });
    }
  }
  Crawler.instance = Crawler.app._initialize();
  </script>
</html>

request.php:

<?php
  print rand(1,2) == 1 ? 'true' : 'false';

Gégé
12 févr. 2012 à 10:55

Merci pour ton exemple, mais dedans si j'ai bien compris tu exécutes la requete toutes les secondes.

Au niveau du serveur la charge de requête sera énorme non ?

Réponse 3 / 10

Gégé
12 févr. 2012 à 11:19

A la relecture de ce que tu m'as marqué mon exemple que je viens de faire n'a rien à voir j'ai l'impression...

Je sais que j'en demande beaucoup mais pourrais tu inclure dans ton exemple
la condition avec l'heure courante comme tu me l'as noté.

J'espère ne pas être trop chiant avec mes demandes mais j'ai vraiment du mal avec le fonctionnement de l'ajax...

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/02/2012 à 11:37

Je viens de te poster un exemple au dessus.

Tu peux l'améliorer en réinitialisant le timer lors du déclenchement en le settant à 86400000 (un jour de plus en MS) pour qu'il se redéclenche le lendemain si la page n'est pas rechargée entre temps.

Gégé
12 févr. 2012 à 11:37

Ouais j'ai vu ton code merci beaucoup ! Mais là j'ai du mal à tout bien comprendre...encore une fois, désolé...

Ce "compte à rebours fonctionne donc en permanence c'est bien çà ?

Et donc dès que l'heure programmée est la même que l'heure actuelle

il exécute:

function output(){
        alert('Appel de la fonction de vérification');
      }

Et donc à la place de "Appel de la fonction de vérification" je mets la fonction que tu m'as noté plus haut ?

Je m'embrouille c'est un malheur...en tout cas merci beaucoup de m'aider c'est vraiment sympa.

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/02/2012 à 11:50

Je t'explique en détail:

Au moment ou la page est appelée, ce bout de code PHP est exécuté:

<?php  
  //11h25 et 20 secondes  
  $verifTime = mktime(11, 25, 20, date("m"), date('d'), date("Y"));  
  //Si l'heure de vérification est passée, on ajoute un jour  
  if($verifTime < time()){  
    $verifTime += 86400;  
  }  
  $interval = $verifTime - time();  
?>

$verifTime contient l'heure à laquelle tu souhaites vérifier la valeur de ta variable
$interval contient la différence entre l'heure courante et l'heure de vérification (en secondes).

On a ensuite du code HTML avec à l'intérieur un bout de code php:

  
 setTimeout(output, <?php print $interval * 1000; ?>);

On va donc insérer la valeur de $interval en PHP dans du javascript.

setTimeout() sert à déclencher une fonction au bout d'un temps donné.
Ce temps correspond à l'interval entre maintenant et $verifTime.

Il faut ensuite que tu mettes ton script de vérification (l'appel Ajax) à la place de la function output.

Pour faire simple, le script que je te propose est simplement un sorte de cron en javascript.

Gégé
Modifié par Gégé le 12/02/2012 à 11:54

Ok merci beaucoup c'est très clair mais du coup avec ce code, je n'est pas besoin de tache cron qui update ma table !

Avec ton système à une heure donnée je lance l'affichage de ma div tout simplement non ?

Et à une autre heure j'arrête l'affichage.

C'est bien possible non ?

genre:

<script type="text/javascript">  

function afficher_ma_div()  

document.getElementById('ma_div').style.display='block';  

      setTimeout(afficher_ma_div, <?php print $interval * 1000; ?>);  
 </script>

Ce code serait bon ?

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/02/2012 à 11:59

ta crontask te permet de mettre à jour une valeur dans ta base de donnée si j'ai bien compris.

Le javascript va ensuite faire une requête Ajax sur une page php qui va lui retourner la valeur mise à jour par la crontask. En se basant sur cette valeur, le scripts JS va faire apparaître ou disparaître ton div.

Tu as donc besoin des deux scripts pour que le tout fonctionne.

Par contre si ton seul but est d'afficher un div à une heure donnée et de le cacher à une autre heure, tu n'as pas besoin de crontask. C'est ce que tu veux faire ? si oui, je ferai quelques modifications dans mon exemple pour faire qqch de propre =)

Réponse 4 / 10

Gégé
12 févr. 2012 à 12:02

et bien en fait oui je veux "tout simplement" faire en sorte qu'une div apparaisse à 20h00 exactement sur mon site et disparaisse à 20h01.

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 12:06

Ok, je te pond le code, compte 15 minutes.

Gégé
12 févr. 2012 à 12:20

bin ok merci beaucoup

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 12:41

Voila le script:

Il fait apparaitre un div à 20h00 et le fait disparaitre à 20h01

<?php
  //11h25 et 20 secondes
  $verifTime = mktime(20, 00, 00, date("m"), date('d'), date("Y"));
  //Si l'heure de vérification est passée, on ajoute un jour
  if($verifTime < time()){
    $verifTime += 86400;
  }
  $interval = $verifTime - time();
?>
  <html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      #statusDiv{
        height:100px;
        width:100px;
        background-color:#f00;
        display:none;
      }
    </style>
  </head>
  <body>
  <div id="statusDiv">
    Status div
  </div>
  <?php print $interval; ?>
  <script type="text/javascript">
    var Cron = [];
    Cron.manager = {
      showTimer: false,
      hideTimer: false,
      //Nombre de MS durant lesquelles le div restera affiché
      showTime: 60000,
      _initialize: function(){
        this.showTimer = this.setTimer(<?php print $interval * 1000; ?>, this.showDiv);
        this.hideTimer = this.setTimer(<?php print $interval * 1000; ?> + this.showTime, this.hideDiv);
      },
      setTimer: function(interval, target){
        timer = setTimeout(target, interval);
        return timer;
      },
      hideDiv: function(){
        var self = Cron.manager;
        clearTimeout(self.hideTimer);
        self.setTimer(86400000, self.hideDiv);
        document.getElementById('statusDiv').style.display = 'none';
      },
      showDiv: function(){
        var self = Cron.manager;
        clearTimeout(self.showTimer);
        self.setTimer(86400000, self.showDiv);
        document.getElementById('statusDiv').style.display = 'block';
      }
    }
    Cron.manager._initialize();
  </script>
  </body>
  </html>

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 12:46

Je te mets juste en garde à l'aspect de la sécurité du script pour le moment: l'utilisateur peut très bien afficher manuellement le div. Donc si il contient des données sensibles, il faudra quand même recourir à Ajax et à PHP pour en récupérer le contenu. L'avantage est de pouvoir faire une vérification de l'heure au niveau PHP.

Gégé
Modifié par Gégé le 12/02/2012 à 12:58

Merci beaucoup je vais de suite essayer de mettre tout çà en place et tester !!

Quand tu dis l'utilisateur peut afficher manuellement le div c'est à dire ?

Si le div est masqué comment il le fait apparaitre ?

Enfin de toute façon aucune données sensible.

Et merci encore mille fois pour ce script !!!!

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/02/2012 à 13:00

Pour le moment on se contente de masquer le div en CSS, mais il est bien présent dans le code source de la page.

Donc si quelqu'un souhaite accéder à son contenu en dehors des heures d'affichage, c'est possible pour le moment. Souhaites-tu sécuriser tout ça ?

Edit: encore une question... si qqun se connecte à 20h00 et 30 s, il faudrait que le div soit affiché durant 30 secondes quand même ?

Gégé
12 févr. 2012 à 13:02

ok oui effectivement il apparaitra dans le code source de la page mais ce n'est pas un problème.

Mais si çà ne te dérange pas trop de me donner un exemple sécuriser çà pourrait m'être très utile aussi !

Enfin en tout cas merci beaucoup encore de ton aide, faut que je mette en place tout çà vite fait là que je teste !! :-)

Réponse 6 / 10

Gégé
Modifié par Gégé le 12/02/2012 à 13:23

J'ai mis en place le code et ma div s'affiche tout le temps, çà peut être du à un mauvais placement du code ?

J'ai bien mis dans le header et dans body comme il faut il me semble pourtant.

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 13:29

Tu as bien mis en place ce bout de CSS ?

<style type="text/css" media="screen">
      #statusDiv{
        height:100px;
        width:100px;
        background-color:#f00;
        display:none;
      }
    </style>

Je suis en train d'améliorer le script et de te préparer une version sécurisée, reste à l'écoute ;)

Gégé
12 févr. 2012 à 13:33

oui c'est çà qui m'étonnes avec le display:none elle ne devrait pourtant pas apparaitre..je vais vérifier j'ai surement du faire une erreur !

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/02/2012 à 14:02

Voila une version finale:

Voir nouvelle version dans post du dessous

Code de request.php:

<?php  
  if(mktime(20, 00, 00, date("m"), date('d'), date("Y")) >= time()){  
    if(mktime(20, 01, 00, date("m"), date('d'), date("Y")) <= time()){  
      print 'Dans les heures.';  
      return false;  
    }  
  }  
  print 'Pas dans les heures.';

Réponse 7 / 10

Gégé
12 févr. 2012 à 13:57

Bon alors il ya plusieurs soucis:

Sur firefox: la div s'affiche puis disparait au bout d'une minute et ce à chaque fois qu'on actualise la page

Sur safari,internet explorer: la div ne s'affiche pas, mais à l'heure précisée elle ne s'affiche pas non plus...

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 14:03

Tu peux tester ça sur IE ?
Il faut créer la page request.php (voir code dans post ci-dessus)

<?php
  //11h25 et 20 secondes
  $verifTime = mktime(14, 01, 00, date("m"), date('d'), date("Y"));
  //Si l'heure de vérification est passée, on ajoute un jour
  if($verifTime < time()){
    $verifTime += 86400;
  }
  $interval = $verifTime - time();
?>
  <html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <style type="text/css" media="screen">
      #statusDiv{
        height:100px;
        width:100px;
        background-color:#f00;
        display:none;
      }
    </style>
  </head>
  <body>
  <div id="statusDiv">
    Status div
  </div>
  <?php print 'Déclenchement dans <span id="seconds">' . $interval . '</span> s'; ?>
  <script type="text/javascript">
    var Cron = [];
    Cron.manager = {
      showTimer: false,
      hideTimer: false,
      //Nombre de MS durant lesquelles le div restera affiché
      showTime: 60000,
      _initialize: function(){
        <?php 
          if($interval > 86340): 
        ?>
            $('#statusDiv').css('display', 'block');
            this.showTimer = this.setTimer(<?php print $interval * 1000 ?>, this.showDiv);
            this.hideTimer = this.setTimer(<?php print ($interval - 86400 + 60) * 1000; ?>, this.hideDiv);
        <?php 
          else: 
        ?>
          this.showTimer = this.setTimer(<?php print $interval * 1000; ?>, this.showDiv);
          this.hideTimer = this.setTimer(<?php print $interval * 1000; ?> + this.showTime, this.hideDiv);
        <?php
          endif;
        ?>
        if(this.showTimer > 86341){
          $('#statusDiv').css('display', 'block');
        }
        this.getContent();
      },
      getContent: function(){
        $.ajax({
          url: "request.php",
          success: function(result){
            $('#statusDiv').html(result);
          }
        });
      },
      setTimer: function(interval, target){
        timer = setTimeout(target, interval);
        return timer;
      },
      hideDiv: function(){
        var self = Cron.manager;
        $('#statusDiv').html('');
        clearTimeout(self.hideTimer);
        self.setTimer(86400000, self.hideDiv);
        $('#statusDiv').css('display', 'none');
      },
      showDiv: function(){
        var self = Cron.manager;
        self.getContent();
        clearTimeout(self.showTimer);
        self.setTimer(86400000, self.showDiv);
        $('#statusDiv').css('display', 'none');
      }
    }
    Cron.manager._initialize();

    function decremente(){
      document.getElementById('seconds').innerHTML = document.getElementById('seconds').innerHTML -1;
    }
    setInterval(decremente, 1000);
  </script>
  </body>
  </html>

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 18:18

Une erreur s'est glissée dans le script:

showDiv: function(){
        var self = Cron.manager;
        self.getContent();
        clearTimeout(self.showTimer);
        self.setTimer(86400000, self.showDiv);
        $('#statusDiv').css('display', 'none');
      }

à remplacer par block

Réponse 8 / 10

Gégé
12 févr. 2012 à 14:07

Je teste de suite !

Réponse 9 / 10

Gégé
Modifié par Gégé le 12/02/2012 à 14:25

bon alors la div ne s'affiche pas

le echo marque: 29 s"; ?>

donc le temps avant execution

et rien ne se passe...

Enfin là même chose sur tous les navigateurs.

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 14:30

tu exécute bien ce script dans via wamp ou easyphp ?

Gégé
Modifié par Gégé le 12/02/2012 à 14:43

non direct envoi fichier sur serveur et affichage sur internet enfin dans les différents navigateur...

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 14:48

je peux avoir l'url pour voir ce qui s'passe ?

Gégé
12 févr. 2012 à 14:54

et bien le site n'étant pas fini je n'ai pas trop envie de publier l'adresse ici...

C'est un site de vente donc et je ne voudrais que quelqu'un puisse y accéder avant qu'il ne soit complètement terminer !

C'est d'ailleurs le dernier souci qu'il me reste pour finaliser mon site...

Et çà me stresse de ne pas y arriver...

Je pourrais te donner l'adresse par mail si tu veux ?

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 févr. 2012 à 15:00

Tu peux me l'envoyer par MP, je la diffuserai pas. Ca sera plus simple pour t'aider.

Réponse 10 / 10

skurseb Messages postés 8 Date d'inscription mardi 6 mai 2008 Statut Membre Dernière intervention 18 février 2012 1
12 févr. 2012 à 15:16

je t'es envoyé l'adresse par MP

Discussions similaires

programme qui n'affiche pas le mot secret

VBA : Range avec références variables..

Remplir une cellule (texte) en fonction d'une autre (texte).

Excel:récupérer le contenu d'une cellule en fonction d'une autre

Afficher toutes les lignes masquées excel

Discussions similaires

Newsletters