tchat en ajax et php

Par AaFrederic Husson, il y a 8 ans

Javascript

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

AaFrederic Husson, il y a 8 ans

personne as une idée?

Pierrot01, il y a 8 ans

setInterval à la place de setTimeOut

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

@plus

Pierre

AaFrederic Husson, il y a 8 ans

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

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

AaFrederic Husson, il y a 8 ans

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

Pierrot01, il y a 8 ans

.empty() fait ça bien ;)

a+

AaFrederic Husson, il y a 8 ans

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

Pierrot01, il y a 8 ans

faut l'vider à chaque fois ;)

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

@plus

Pierre

AaFrederic Husson, il y a 8 ans

ç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>
Kenor, il y a 8 ans

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); }

AaFrederic Husson, il y a 8 ans

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 }); });
Pierrot01, il y a 8 ans

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

AaFrederic Husson, il y a 8 ans

ça change toujours rien

Pierrot01, il y a 8 ans

ça fait quoi exactement ?

AaFrederic Husson, il y a 8 ans

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

Pierrot01, il y a 8 ans
$(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 }); });
Kenor, il y a 8 ans

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

AaFrederic Husson, il y a 8 ans

merci à tous maintenant ça fonctionne