AJAX : afficher des commentaires

Mousse
Javascript

Bonjour à tous,

Je viens vers vous car je galère pas mal sur ce point et je ne suis pas un pro d'Ajax. Je suis en train de faire un petit projet de réseau social et le concept de ma navigation est que la page affiche chaque articles mais pour voir les commentaires, il faut cliquer sur un lien (balise ancre et non un formulaire) qui affiche (en JQuery) une pop-in contenant ces commentaires.

Du coup, pour alléger le temps de chargement du site, j'ai pensé qu'il serait préférable au chargement de la page de ne pas récupérer les commentaires mais de les récupérer seulement lorsque l'utilisateur clique sur le lien affichant la pop-in. J'ai donc pensé à utiliser l'Ajax.

Le problème est que je ne vois pas du tout la démarche à suivre... Quelqu'un pourrait m'éclairer à ce niveau ?

En vous remerciant.

6 réponses

Hotgeart
Réponse acceptée

En jQuery :

$(".comment").click(function () {
    $(".load").show();
    $.ajax({
        url : "http://domain.net/load_comment.php?id=50",
        success: function(html){
            if(html){
                $("#commments").append(html);               
            }
            $(".load").hide();
        } 
    });
});

<u>Explications :</u>

-> Quand on clique sur l'élément qui a la class comment.
-> On affiche l'élément qui a la class load. Donc dans cette div tu mets une image qui charge ou un texte style : 'Chargement...'.
-> En Ajax on charge la page load_comment.php qui donc sortira le code dont on a besoin.
-> Success ? Si ça retourne de l'html on le fou dans la div #comments.
-> On cache l'élément qui montre que la page charge.

EASY NON ?

Mousse
Auteur

Merci pour l'explication ! Mais je ne comprends pas une chose...

Au success, la fonction a la variable html en paramètre. Et on vérifie si cette variable contient du html.
Mais d'où elle sort cette variable ? C'est ce que récupère Ajax via le fichier php?

Mon fichier Php retourne un tableau de données (date, nom, contenu du commentaire) pour ma part.

deadC3LL

Bonjour,
Effectivement dans le code de Hotgeart le "html" est ta donnée renvoyée (ou plus précisément affichée puisqu'il s'agit d'un echo) par la page load_comment.php
Mais dans ton cas si tu renvoies un tableau, le plus simple et le plus propre serait de le renvoyer au format json ou xml et de le parcourir avec jQuery.

Hotgeart

Avec mon code ton fichier doit retourner l'html que tu veux insérer.

Mousse
Auteur

D'accord, merci pour l'info !

Du coup j'ai renvoyé un echo contenant mon html. Ca à l'air de bien marcher sauf que rien ne s'affiche dans mon div... Pourtant d'après la console de Firebug, mon echo est bien reçut en réponse. Mais le div reste vide...

Voilà mon code html et Jquery si quelqu'un voit l'oubli.

<div class='back_fader'>
    <div class='popup_content'>
        <div id='comments'>
        </div>
    </div>
</div>

$('.click_to_pop').click(function() {

    var post_id = $(this).attr('name');

    //$(".load").show();
    $.ajax({
        type: "GET",
        url : "ajax_show_comments.php?post_id="+post_id+"&user_id=1",           
        success: function(html){

            $('.back_fader').css({'display':'block'});
            $('.popup_content').css({'display':'block'});
            $('.back_fader').show();
            $('.popup_content').show();
            $("#comments").append(html);             

            //$(".load").hide();
     }, 
     error: function(){
        alert('failure');
    }
     });
});
Mousse
Auteur

En fait j'ai rien dit... Ca s'affichait mais derriere mon div du coup je ne le voyait pas...
Donc merci à vous deux pour votre aide ! Sans vous j'aurai bien galéré... :D

Screen