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

Par mansaychai, il y a 10 ans

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, il y a 10 ans

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, il y a 10 ans

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, il y a 10 ans

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

freezlike, il y a 10 ans

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.

mansaychai, il y a 10 ans

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>