refresh ajax soucis d'affichage

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

@plus

Pierre

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

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

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).

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?

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

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.

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

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

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

@plus
Pierre

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>