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