jquery ajax load recharge la page apres un post

13 janvier 2018 à 12:14:37

bonjour,

j'ai une fonction load qui me permet de changer de discution sans recharger mais apres l'ajout d'un nouveau message ma fonction load ne fonctionne plus la page se recharge

voici mes fonctions

$(document).ready(function() {
	
	  $(".chat_profils_homme").on('click', function(event) {
	  event.preventDefault();
	  var url = $(this).prop('href');
      $("#fiche-1").load(url);
      });



     	  $('#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');
			document.forms['ajoute_mess'].reset();
			document.getElementById('affiche_mess').scrollTop=document.getElementById('affiche_mess').scrollHeight;

			

			}).catch(function (error) {
            console.log(error);
        });
			
			
        }).catch(function (error) {
            console.log(error);
        });
    });
});

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça

Baylock

13 janvier 2018 à 13:50:52

Une question:
Qu'est-ce que est sensé faire ta ligne 30?

AaFredericHusson

13 janvier 2018 à 13:58:25

elle met à jour la liste des discutions

si on envoie un message a un nouveau destinataire elle le rajoute dans la div correspondante

ah bah non en fait j'ai l'impression qu'elle sert à rien...

-
Edité par AaFredericHusson 13 janvier 2018 à 14:00:02

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça

Baylock

13 janvier 2018 à 14:04:18

A ma connaissance, ce que tu dis, c'est la ligne 3 qui le fait.

La ligne 30 ne fait absolument rien. Aucun événement n'y est associé.
C'est juste la description d'une classe et rien d'autre.

Ou alors j'ai un trou dans mes modestes connaissances et je vais apprendre un truc :-)

Mais si j'ai raison, cela devrait rentre ton script instable, voire inopérant.

-
Edité par Baylock 13 janvier 2018 à 14:09:57

AaFredericHusson

13 janvier 2018 à 14:09:32

oui tu as juste j'avais d'ailleur édité

c'est cette fonction ligne 3 qui bug apres j'ajout d'un message ligne 11

mais si ligne 3 je fait:

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

ça fonctionne mais ma page va ramer au bout d'un moment apres plusieurs load..

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça

Baylock

13 janvier 2018 à 14:32:14

J'ai du mal à voir la structure de l'ensemble donc c'est pas simple.
Une question bête:
Est-ce que la div "#ajoute_mess" se trouve DANS la div ".chat_profils_homme"?

Parce qu'alors, quand tu clique sur le bouton d'envoi d'ajout de message, tu cliques automatiquement sur le profil ce qui active deux événements en même temps. Ce qui peut générer des comportements inattendus.

Si c'est pas le cas, désolé, mais vu comme ça, au microscope, c'est pas facile de voir où ça va et comment c'est foutu.

AaFredericHusson

13 janvier 2018 à 14:50:09

Je te met le code complet mais regarde pas les requete sql qui seront modifié par la suite...

<?php
session_start(); 



include "".$_SERVER['DOCUMENT_ROOT']."/include/mysql_connect.php";


?>
<script>

var interval;
clearInterval(interval);

function update(){


        var id_update = $('#affiche_mess div:last').attr('id'); // on récupère le dernier ID
		var exp = $('#affiche_mess div:last').attr('data-exp');
		var dest = $('#affiche_mess div:last').attr('data-dest');

        $.ajax({
        url : "/fiche_cli/update_mess.php?id=" + id_update + "&exp=" + exp + "&dest=" + dest, // on passe l'id le plus récent au fichier de chargement
        method : 'GET',
        success : function(html){
        $('#affiche_mess').append(html);
        }
        });

}

	interval = setInterval(function() {update();}, 1000);


$(document).ready(function() {
	
	  $(".chat_profils_homme").on('click', function(event) {
	  event.preventDefault();
	  var url = $(this).prop('href');
      $("#fiche-1").load(url);
      });



     	  $('#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');
			document.forms['ajoute_mess'].reset();
			document.getElementById('affiche_mess').scrollTop=document.getElementById('affiche_mess').scrollHeight;

			

			}).catch(function (error) {
            console.log(error);
        });
			
			
        }).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 style="margin-bottom: -15px; color: #007ba2;" class="chat_profils_homme" href="/fiche_cli/chat.php?exp='.$_SESSION['pseudo'].'&dest='.$data2['dest'].'">'.$data2['dest'].'</a>';
}
else
{
echo '<A style="margin-bottom: -15px; color: #f40e63;" class="chat_profils_homme" href="/fiche_cli/chat.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" style="line-height: 10px;" 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 id 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 data-exp="'.$_GET["exp"].'" data-dest="'.$_GET["dest"].'" id="'.$data2['id'].'">Moi: '.$data2['mess'].'</div><br>';
}
if ($data2['exp']==$_GET['dest'])
{
echo '<div data-exp="'.$_GET["exp"].'" data-dest="'.$_GET["dest"].'" id="'.$data2['id'].'">'.$data2['exp'].': '.$data2['mess'].'</div><br>';
}
	
}
?>
</div>


</div>

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça

AaFredericHusson

14 janvier 2018 à 15:37:17

help

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça

mohzah

14 janvier 2018 à 15:52:25

Ca ne serait pas mieux d'utiliser les options "succes" et "error" de l'appel Ajax plutôt que le .then() ?

AaFredericHusson

14 janvier 2018 à 16:22:35

ma fonction submit fonctionne mais apres un submit c'est cette fonction qui ne marche plus

$(".chat_profils_homme").on('click', function(event) {
        event.preventDefault();
        var url = $(this).prop('href');
        $("#fiche-1").load(url);
    });

j'ai essayé:

 $("body").on('click', '.chat_profils_homme', function(event) {
        event.preventDefault();
        var url = $(this).prop('href');
        $("#fiche-1").load(url);
    });

la ça fonctionne mais apres plusieurs click ma page commence à ramer

c'est bon ça fonctionne j'ai modifié comme ça:

$(".chatter").on('click', '.chat_profils_homme', function(event) {
        event.preventDefault();
        var url = $(this).prop('href');
        $("#fiche-1").load(url);
    });

-
Edité par AaFredericHusson 14 janvier 2018 à 16:37:03

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça