Comparing HTML with Javascript

Question

So I was wondering something. In a IM/chat website I'm making, I have it check the database every 10 seconds or so to see if any new data has come in. And also, when the user posts a new comment, it automatically sends it to the database and adds it to the comment list without reloading. But it loads all the comments each time.

I was wondering if its possible to add an effect to the new comment (such as fading in) without doing that to all the old comments as well.

function update(){
    oldhtml = $('#listposts');
    $.ajax({
            type: "POST",
            data: "",
            url: "update.php",
            success: function(msg){
                $("#listposts").html(msg);
                $('.comment_date').each(function(){
                    $(this).text('[' + prettyDate($(this).text())+']');
                if(oldhtml == )
                });
            }
        });
}
var intervalID = window.setInterval(update, 10000);

That's my update code. Here's my post code:

$("#postbutton").click(function () {
    if(!$('#post').val()==""){
        $.ajax({
            type: "POST",
            data: "data=" + $("#post").val(),
            url: "post.php",
            success: function(msg){
                $("#listposts").html(msg);
                $('.comment_date').each(function(){
                    $(this).text('[' + prettyDate($(this).text())+']');
                });
            }
        });
        $("#post").val("");
    }
});

I'm also using prettyDate, as you can see. But that has nothing to do with this problem.

So as the title states, I was gonna try to save the current html in a variable (oldhtml) and then load the new stuff. Then I would compare the two and just use the new comment to fade in. Am I way out there? Am I missing the point?

Oh and please don't down vote me just cause I missed an obvious solution. I thought you're supposed to use it if I don't explain well, which I think I did.

Don't ask people not to downvote you, nobody's downvoting you. Your affirmations may get downvoted... my affirmations may get downvoted... because someone didn't agree with one of us. — Mihai Stancu
– Mihai Stancu, Commented Jun 27, 2012 at 20:31
What about, instead of reloading all messages, just grab new ones since a certain time stamp? Then you could fade in just the new stuff. Might be easier than comparing html, and faster if there are a lot of messages. — MrOBrian
– MrOBrian, Commented Jun 27, 2012 at 20:33
I'm not saying they can't downvote me, I'm just saying that the time before they did it in the wrong way. Many people pointed it out too. But thank you. I'm sorry for not understanding. :) — transparent
– transparent, Commented Jun 27, 2012 at 20:34
@MrOBrian THANK YOU. This might work. I was thinking that after a while it might get a little slow. :) Thank you. :) I'll try this out and get back to you. — transparent
– transparent, Commented Jun 27, 2012 at 20:35
Also, checking every 10 seconds could be quite server intensive. Have you looked into Comet? en.wikipedia.org/wiki/Comet_(programming) — jaypeagi
– jaypeagi, Commented Jun 27, 2012 at 20:36

pimvdb · Accepted Answer · 2012-06-27 21:20:49Z

1

You can do this in your success handler:

var $dv = $('<div />').css('display', 'none').html(msg);
$("#listposts").append($dv);
$dv.fadeIn();

Of course you can use a <span> instead of <div> depending on your needs.

edited Jun 27, 2012 at 21:20

pimvdb

155k80 gold badges313 silver badges357 bronze badges

answered Jun 27, 2012 at 20:30

Blaster

9,0801 gold badge30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smdrager · Accepted Answer · 2012-06-27 20:38:02Z

0

Similar to Blaster's...

 $('<div />').html(msg).appendTo('#posts').hide().fadeIn();

answered Jun 27, 2012 at 20:38

smdrager

7,4276 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

Comparing HTML with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related