jquery ajax load recharge la page apres un post

AaFrederic Husson
Javascript

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

4 réponses

Lartak
Réponse acceptée

Bonjour.
Au lieu de sélectionner le body comme élément parent pour l'event du click, sélectionnes plutôt un élément parent plus proche qui n'est pas rechargé lors de ton load, si les requêtes deviennent de plus en plus au longues au fur et à mesure des load, c'est parce qu'à chaque fois tu sélectionnes quasiment toute ta page web, c'est donc plutôt normal.

Pierrot01

Salut,

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

Il se passe quoi exactement ?

@plus

Pierre

AaFrederic Husson
Auteur

quand j'arrive sur le tchat je peux changer de discution sans probleme sans que la page se recharge

par contre si j'envoie un message a un utilisateur et que je souhaite apres changer de discution ma fonction ne fonctionne plus et je suis redirigé vers la page appelé

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 avoir changé plusieurs fois de discution la page commence à devenir lente

AaFrederic Husson
Auteur

oui effectivement c'est quand même mieux je sélectionne la div chatter qui fais partie de la page tchat et ça m'as l'aire bien au bout de 50 click c'est toujours bon

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