1

Am creating a comment system for a web app, the comments are loaded when a user clicks on the comment image, html code is dynamically generated with json to display the comments. But when the image is clicked again,the request is made again populate the page with the same data

Heres my code

function latest_pheeds() {
    var action = url+"pheeds/latest_pheeds";
    $.getJSON(action,function(data) {
        $.each(data,function(index,item) {
            $('#pheed-stream').append
            (
            '<div class="pheed" id="'+item.pheed_id+'">'+
            '<p><a href="">'+item.user_id+'</a></p>'+
            '<p>'+item.pheed+'</p>'+
            '<div class="pheed_meta">'+
            '<span>'+item.datetime+' Ago</span>'+
            '<span>'+item.comments+
            '<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
            '</span>'+
            '</div>'+
            '</div>'
            );
        });
    });
}



function retrieve_comments(pheed_id) {
    var action = url+'comments/get_comments';
    var crsf =  $('input[name=ci_csrf_token]').val();
    var dataString = "pheed_id="+pheed_id+"&ci_csrf_token="+crsf;
    $.ajax({
        url:action,
        type:'POST',
        cache:false,
        dataType:'json',
        data:dataString,
        success:function(data) {
            $.each(data,function(index,item) {
                $("#" + pheed_id).append(
                '<div class="pheed_comments">'+
                    '<div class="comment">'
                    +'<span><p>'+item.user+'</p></span>'
                     +item.comment+
                    '</div>'+
                '</div>'+
                '<div id="comment_box">'+
                    '<textarea id="comment" cols="30">'+
                    '</textarea><br>'+
                    '<input type="button" class="submit_btn" value="comment" />'+
                '</div>'
                );
            });
        }
    });
}

latest_pheeds() loads the pheeds and retrieve_comments gets the comments of the pheed_id passed to it. How do i determine if the comment area has already been populated and instead update it with new comments if available. Thanks

3 Answers 3

3

Check for

$("#" + pheed_id +' .pheed_comments').length

if will be 0 if the element(I guess vou mean div.pheed_comments ) doesn't exist.

0
2

Several choices:

1) If you already have all the comments from your ajax call, then just remove the previous comments you have from the DOM and insert everything you just got.

2) If you have an ajax call that can retrieve just the new comments, then you can just check the DOM to see if you already have comments in the DOM and then just request new comments after some token in time (that you would have previously saved). When you receive the new comments, you would append them to what you have.

$('#pheed-stream').children().length will tell you how many children there are in the pheed-stream hierarchy. If that's zero, you haven't done any pheeds yet.

I would suggest that it's probably easiest to just retrieve all the comments and replace everything you have with the new list of comments than to try to retrieve just the new comments. Retrieving just the new comments will require some sort of time token that you can give the server so it knows which "new comments" to give you.

$("#" + pheed_id + " .pheed_comments").length will tell you whether any comments have been retrieved yet for that pheed_id.

1

you are adding div with id. Just check if it exists. If yes, then update it, otherwise insert.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.