Rafraîchir une <div> en Ajax dans le default.ctp

mansaychai
CakePHP

Bonjour à tous,

Mon problème est le suivant :
Dans mon layout default.ctp, je souhaite rafraîchir une partie de ma page où est affiché un compte des messages non-lus en attente.

Je suis débutant en JS et je galère un peu !

Pour l'instant, j'ai fait ça pour tester :

// default.ctp
<body onload='refresh_div();'>
         <div id="refresh">
                    <?php echo $this->element('count_msg'); ?>
         </div> 

         <?= $this->Html->script('jquery'); ?>
         <script>
          function refresh_div()
          {
              var xhr_object = null;
              if(window.XMLHttpRequest)
              { // Firefox
                  xhr_object = new XMLHttpRequest();
              }
              else if(window.ActiveXObject)
              { // Internet Explorer
                  xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
              }
              var method = 'GET';

              var filename = "http://localhost/html/public/MHD3/admin";
              xhr_object.open(method, filename, true);
              xhr_object.onreadystatechange = function()
              {
                  if(xhr_object.readyState == 4)
                  {
                      var tmp = xhr_object.responseText;
                      document.getElementById('refresh').innerHTML = tmp;
                  }
              }
              xhr_object.send(null);
              setTimeout('refresh_div()', 2000);
      }
  </script>
</body>

Bon, en gros ça fonctionne, mon refresh de l'élément toute les 2 secondes semble ok.

Cependant, j'ai un soucis au niveau de l'affichage (et pas des moindre). En fait, dans ma <div id="refresh">, je ne récupère pas seulement mon element, mais aussi le visuel de toute ma page. Ce qui fait que j'ai deux fois mon contenu, l'un imbriqué dans l'autre.
Et cela, avec un code source clean...

Bref, je ne serais pas contre un petit coup de main, je ne sais pas trop ou j'ai merdé et votre aide sera très appréciée :D

5 réponses

mansaychai
Auteur
Réponse acceptée

Bonjour,
Merci de vos réponses, finalement ça m'a permis d'explorer de nouvelles fonctionnalitées de Cake.

J'ai fini par le faire à la mano avec jQuery.
Je mets mon code ici, si ça peut servir à quelqu'un !

<!-- div à rafraîchir -->
<div id="refresh"></div>
  <script>
  $( document ).ready(function refresh_div() {
        var xhr_object = null;
        if(window.XMLHttpRequest)
        { // IE7+, Firefox, Chrome, Opera, Safari
            xhr_object = new XMLHttpRequest();
        }
        else if(window.ActiveXObject)
        { // IE6, IE5
            xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
        }
        var method = 'GET';
        var filename = '/html/public/MHD3/admin/Messages/count_msg';    // ce que l'on veut charger dans la div
        xhr_object.open(method, filename, true);
        xhr_object.onreadystatechange = function()
        {
            if(xhr_object.readyState == 4)
            {
                var tmp = xhr_object.responseText;
                document.getElementById('refresh').innerHTML = tmp;
            }
        }
        xhr_object.send(null);
        setTimeout(refresh_div, 2000);
  });
  </script>
mansaychai
Auteur

Je pense avoir compris. Il faut que, dans ma variable filename, je mette le chemin vers mon element 'count_msg.ctp'.
Quelqu'un saurait comment s'y prendre ?

Airday

Fait une fonction count_msg() dans ton controller Pages.
Cette fonction permettra de renvoyer le nombre de messages en json.
Tu recuperes la valeur et tu l'affiche.

        if($this->RequestHandler->isAjax() && isset($id)){
            .....
        }else{
            $this->redirect('/');
        }
        die(json_encode($return));
mansaychai
Auteur

Merci de ta réponse Airday !
Bon, pour l'instant ça déconne toujours, mais je sens que je tiens le bon bout !

freezlike

Bonsoir,
tu fais appel à Jquery pourquoi ne pas l'utiliser ?
et $this->RequestHandler->isAjax() est deprecated je te conseil plutôt $this->request->is('ajax')

Cordialement.