refresh ajax soucis d'affichage

Par AaFrederic Husson, il y a 8 ans

Javascript

bonjour,

j'ai créé un tchat en ajax mais lors du refresh c'est comme si le texte clignotais on vois clairement le refresh

serait il possible de remédier à cela?

$(document).ready(function() { var interval; $("body").on('click', '.chat_profils_homme',function(event) { event.preventDefault(); clearInterval(interval); ifModified: true; async: true; var url = $(this).prop('href'); $("#affiche_mess").empty().load(url); // j'apelle le div interval = setInterval(function() {$("#affiche_mess").empty().load(url); },1000); // je le met à jour toutes les 5 secondes }); });

12 réponses

Pierrot01, il y a 8 ans

qq chose de mis à jour toutes les secondes, c'est normal que ça bouge :D

@plus

Pierre

AaFrederic Husson, il y a 8 ans

bah non je l'avais deja fait en xmlhttprequest et on voyais pas le refresh

Pierrot01, il y a 8 ans

load est asyncrone, donc des chargements peuvent se méler.
en passant par une callback, ça devrait peut être atténuer voir régler le problême

@plus

Pierre

Kenor, il y a 8 ans

Le soucis étant que tu veux recharger la page à chaque fois, alors qu'en théorie, tu es sensé ne charger que les nouveaux messages, tu récupérerai proprement en JSON les nouveaux messages, et tu ferais l'ajout proprement en JS derrière (avec un petit effet sympa).

AaFrederic Husson, il y a 8 ans

des données de type texte je sais recupérer mais json j'avais pas reussi je vais regarder ça

j'avais vu que mes pages bougent au chargement est ce que ça pourrais regler le probleme en passant par ajax en get ou post?

Pierrot01, il y a 8 ans

bah nan, il ne rafaichit pas la page, mais son élément #affiche_mess qui doit certainement être une div.
Par contre, le load étant asycrone, le chargement 2 peut démarrer avant que le 1 soit fini, et le 3 aussi et plus y en a, plus ça risque de scintiller.
j'ai donné la solution pour éventuellement régler ce problème.

@plus

Pierre

Kenor, il y a 8 ans

Quand je dis "recharger la page" je parle du bloc, ça revient au même pour moi, dans le sens où il recharge la totalité du contenu "variable" à chaque fois, au lieu de n'ajouter que le nouveau contenu (j'ai peut-etre effectivement pas été très clair :))

Là il supprime tout le contenu > attend le chargement > réaffiche le contenu (forcement ça tremble, entre le moment de la suppression et l'attente du nouveau message)
Hors, il devrait, au pire
Chargé le contenu > remplacer le contenu (mais du coup, il ne peut pas gérer proprement l'ajout d'un message en particulier)
Ou au mieux
Chargé le NOUVEAU contenu > ajouter le nouveau contenu à la suite des messages (cf $.fn.append()), de cette manière, il peut potentiellement alerter de X nouveaux messages sont arrivés par exemple.

Pierrot01, il y a 8 ans

j'ai une idée plus simple.
il creer un clone invisible de son #affiche_mess, il le rempli et il supprime l'original et ren visible le clone.
ça devrai être quasi instantané.
à trois, on va y arriver :D

@plus

Pierre

AaFrederic Husson, il y a 8 ans

et si j'utilise la methode get d'ajax à la place de load ça règlerais pas le problème?

Pierrot01, il y a 8 ans

le .load utilise la méthode ajax, donc ça ne changera rien à mon avis.

@plus
Pierre

Kenor, il y a 8 ans

Si tu veux faire simple :

$.ajax({url:url}).done(function(data) { $("#affiche_mess").html(data); });

à la place de :

$("#affiche_mess").empty().load(url);
AaFrederic Husson, il y a 8 ans

excellent ça fonctionne nickel

j'ai encore quelques petits soucis;

1 - quand je poste ou quand je change de discution la scrollbarr ne se met pas en bas
2 - je n'arrive pas mettre à jour le formulaire avec les nouvelles variables exp et dest quand on change de discution

<?php session_start(); include "".$_SERVER['DOCUMENT_ROOT']."/include/mysql_connect.php"; $sql2 = "SELECT exp,dest,mess,id FROM chat WHERE exp='".$_GET["exp"]."' AND dest='".$_GET['dest']."' OR exp='".$_GET['dest']."' AND dest='".$_GET["exp"]."' ORDER BY date ASC"; $req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql2.'<br>'.mysql_error()); echo $_GET['exp']; ?> <script> var interval; clearInterval(interval); var exp = '<?php echo $_GET['exp']; ?>'; var dest = '<?php echo $_GET['dest']; ?>'; var url = '/fiche_cli/affiche_mess.php?exp=' + exp + '&dest=' + dest; interval = setInterval(function() {$.ajax({url:url}).done(function(data) { $("#affiche_mess").html(data); }); },1000); $(document).ready(function() { //var interval; $("body").on('click', '.chat_profils_homme',function(event) { event.preventDefault(); clearInterval(interval); var url = $(this).prop('href'); //$("#affiche_mess").empty().load(url); // j'apelle le div $.ajax({url:url}).done(function(data) { $("#affiche_mess").html(data); }); interval = setInterval(function() {$.ajax({url:url}).done(function(data) { $("#affiche_mess").html(data); }); },1000); // je le met à jour toutes les 5 secondes document.getElementById('affiche_mess').scrollTop=document.getElementById('affiche_mess').scrollHeight; //$("#chat_ecrire").empty().load(url); //$.ajax({url:url}).done(function(data) { $("#chat_ecrire").html(data); }); }); $('#ajoute_mess').on('submit', function(e) { e.preventDefault(); var $form = $(this); $.ajax({ url: '/fiche_cli/affiche_mess.php', method: 'GET', dataType: 'html', data: $form.serialize() }).then(function (data) { $("#affiche_mess").html(data); // Mise à jour des messages $.ajax({ url: '/fiche_cli/liste_profil.php', method: 'GET', dataType: 'html', data: $form.serialize() }).then(function (data) { $("#list_profil").html(data); $('.chat_profils_homme').position({ top : '30px' }); }).catch(function (error) { console.log(error); }); document.forms['ajoute_mess'].reset(); // Reset du formulaire document.getElementById('affiche_mess').scrollTop=document.getElementById('affiche_mess').scrollHeight; // Baisse la scrollbar }).catch(function (error) { console.log(error); }); }); }); document.getElementById('affiche_mess').scrollTop=document.getElementById('affiche_mess').scrollHeight; </script> <br> <div class="chatter"> <div id="list_profil" class="chat_profils"> <?php $sql2 = "SELECT dest FROM chat WHERE exp='".$_SESSION["pseudo"]."' GROUP BY dest"; $req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql2.'<br>'.mysql_error()); while($data2 = mysql_fetch_array($req2)) { $sql3 = mysql_query("SELECT sexe FROM membres WHERE pseudo='".$data2['dest']."'") or die (mysql_error()); list($sexe) = mysql_fetch_row($sql3); if ($sexe == 'Homme') { echo '<A exp="'.$_SESSION['pseudo'].'" dest="'.$data2['dest'].'" style="margin-bottom: -15px; color: #007ba2;" class="chat_profils_homme" href="/fiche_cli/affiche_mess.php?exp='.$_SESSION['pseudo'].'&dest='.$data2['dest'].'">'.$data2['dest'].'</a>'; } else { echo '<A exp="'.$_SESSION['pseudo'].'" dest="'.$data2['dest'].'" style="margin-bottom: -15px; color: #f40e63;" class="chat_profils_homme" href="/fiche_cli/affiche_mess.php?exp='.$_SESSION['pseudo'].'&dest='.$data2['dest'].'">'.$data2['dest'].'</a>'; } } ?> </div> <div id="chat_ecrire" class="chat_ecrire"> <form id="ajoute_mess" name="ajoute_mess" action="" method="get"> <input type="hidden" name="dest" value="<?php echo $_GET['dest']; ?>"> <input type="hidden" name="exp" value="<?php echo $_GET['exp']; ?>"> <INPUT type="text" name="message" placeholder="Entrez votre message" value=""> <button class="btn">Envoyer</button> </form> </div> <div id="affiche_mess" class="messages"> <?php $aujourdhui = date("Y-m-d H:i:s"); if (isset($_GET['message'])) { $sql1 = "INSERT INTO chat (exp,dest,mess,date,nouv) VALUES('".$_GET['exp']."','".$_GET['dest']."','".$_GET['message']."','$aujourdhui','oui')"; mysql_query($sql1) or die('Erreur SQL !'.$sql1.'<br>'.mysql_error()); } $sql2 = "SELECT exp,dest,mess,id FROM chat WHERE exp='".$_GET["exp"]."' AND dest='".$_GET['dest']."' OR exp='".$_GET['dest']."' AND dest='".$_GET["exp"]."' ORDER BY date ASC"; $req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql2.'<br>'.mysql_error()); while($data2 = mysql_fetch_array($req2)) { if ($data2['exp']==$_GET['exp']) { echo '<div id="'.$data2['id'].'">Moi: '.$data2['mess'].'</div><br>'; } if ($data2['exp']==$_GET['dest']) { echo '<div id="'.$data2['id'].'">'.$data2['exp'].': '.$data2['mess'].'</div><br>'; } } ?> </div> </div>