bonjour je crée un tchat en ajax et php multi conversasion et je bloque sur une fonction

quand je clique sur un pseudo ça m'ouvre la conversasion dans la div affiche_mess mais je ne trouve pas comment mettre à jour cette div toutes les 5 secondes j'ai essayé le code ci-dessous mais ça ne fonctionne pas

<?php
session_start(); 

include "".$_SERVER['DOCUMENT_ROOT']."/include/mysql_connect.php";
?>
<script>

$(document).ready(function() {
  $("body").on('click', '.chat_profils_homme',function(event) {
  event.preventDefault();
    var url = $(this).prop('href');

    $("#affiche_mess").load(url);

  });

var url = $(this).prop('href');  

  setInterval(function(){
    $('#affiche_mess').load('/fiche_cli/chat.php');
  },5000); 

});

$(document).ready(function (e) {
    $('#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' 
            });

            function update() {
            var exp = '<?php print $_GET['exp']; ?>';
            var dest = '<?php print $_GET['dest']; ?>';
            //var url = '/fiche_cli/affiche_mess.php?exp=' + exp + '&dest=' + dest;
            //var get = window.location.search;
            $.get("/fiche_cli/affiche_mess.php?exp=" + exp + "&dest=" + dest, function(data) {
            $("#affiche_mess").html(data);
            });
            window.setTimeout("update();", 5000);
            }

            //update();

            }).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 include "".$_SERVER['DOCUMENT_ROOT']."/fiche_cli/liste_profil.php"; ?>
</div>

<div class="chat_ecrire">
<?php include "".$_SERVER['DOCUMENT_ROOT']."/fiche_cli/ajoute_mess.php"; ?>
</div>

<div id="affiche_mess" class="messages">
<?php include "".$_SERVER['DOCUMENT_ROOT']."/fiche_cli/affiche_mess.php"; ?>
</div>

</div>

18 réponses


Pierrot01
Réponse acceptée
    $(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
                  interval = setInterval(function() {$("#affiche_mess").empty().load(url); },5000); // je le met à jour toutes les 5 secondes
              });
});

personne as une idée?

setInterval à la place de setTimeOut

          setInterval(function(){update(); }, 5000);

@plus

Pierre

merci pour la reponse petite question comme ça en passant est ce qu'il serais possible de raffraichir dans cet appel ajax toutes les 5 secondes?

j'ai commenté dans le code ou je voudrais faire le refresh

$.ajax({
            url: '/fiche_cli/affiche_mess.php',
            method: 'GET',
            dataType: 'html',
            data: $form.serialize()
        }).then(function (data) {
            $("#affiche_mess").html(data);    <-- Raffraichir ici toutes les 5 secondes

avec un setInterval qui fait un appel ajax toute les 5 secondes ca devrait etre bon .

j'ai modifié et la ça m'apelle bien le div et le met bien a jour toutes les 5 secondes mais le soucis c'est que à chaque fois que je change de discution ça me bascule entre chaque discution sur lesquels j'ai cliqué

$(document).ready(function() {
  $("body").on('click', '.chat_profils_homme',function(event) {
  event.preventDefault();
    var url = $(this).prop('href');

    $("#affiche_mess").load(url); // j'apelle le div
    setInterval(function() {$("#affiche_mess").load(url); },5000); // je le met à jour toutes les 5 secondes

  });
});

j'apelle d'abord la div et je met ensuite une fonction pour le mettre à jour sinon il faut attendre 5 secondes avant que la discution demandé s'affiche mais la le soucis c'est que ça me bascule entre les discutions qui ont été sélectionné

en fait si je comprend bien, à chaque clic je rajoute le div dans le dom et il faudrais donc que je le supprime avant de faire mon load mais ça je ne sais pas faire enfin si c'est bien ça

.empty() fait ça bien ;)

a+

j'ai modifié

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

  });
});

mais ça change rien j'ai toujours se basculement de discution

faut l'vider à chaque fois ;)

    setInterval(function() {$("#affiche_mess").empty().load(url); },5000);

@plus

Pierre

ça change toujours rien c'est la même chose

<?php
session_start(); 

include "".$_SERVER['DOCUMENT_ROOT']."/include/mysql_connect.php";
?>
<script>

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

  });
});

$(document).ready(function (e) {
    $('#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 include "".$_SERVER['DOCUMENT_ROOT']."/fiche_cli/liste_profil.php"; ?>
</div>

<div class="chat_ecrire">
<?php include "".$_SERVER['DOCUMENT_ROOT']."/fiche_cli/ajoute_mess.php"; ?>
</div>

<div id="affiche_mess" class="messages">
<?php include "".$_SERVER['DOCUMENT_ROOT']."/fiche_cli/affiche_mess.php"; ?>
</div>

</div>

Tu lances un chat > tu as un interval ttes les X sec.
Tu lances un second chat (discussion) > tu as un interval tte les X sec MAIS, tu as toujours le premier interval qui continu à tourner.

Par conséquent, tu dois mettre une variable avant ton .on('click') (var myInterval;)
Puis mettre ton setInterval dans cette variable (myInterval = setInterval ...)
et au début du .on('click'), bien penser à stopper l'interval précédent
if (myInterval !== undefined) { clearInterval(myInterval); }

je suis pas sur d'avoir compris mais ce que j'ai fait ne fonctionne pas

$(document).ready(function() {

    var interval = setInterval;

  $("body").on('click', '.chat_profils_homme',function(event) {

      if (interval !== undefined) 
      { 
        clearInterval(interval); 
      }

  event.preventDefault();
    var url = $(this).prop('href');
    $("#affiche_mess").empty().load(url); // j'apelle le div
    setInterval(function() {$("#affiche_mess").empty().load(url); },5000); // je le met à jour toutes les 5 secondes

  });
});

var interval = setInterval(function() {$("#affiche_mess").empty().load(url); },5000); // je le met à jour toutes les 5 secondes

ça change toujours rien

ça fait quoi exactement ?

et bien je clique sur un pseudo ça m'affiche la conversasion qui se met à jour comme prévu
si je clique ensuite sur un autre pseudo ça m'affiche une autre conversasion mais là au lieu de refresh la conversasion en cours
ça bascule entre les deux conversasion

j'espere que je suis claire avec mes explications

Pas comme tu l'as fais, mais comme vient de le faire Pierrot1.
(le "interval = setInterval ....", le "..." = le reste de ton setInterval)

merci à tous maintenant ça fonctionne