selecting divs retrieved through AJAX in jquery

Question

Hi, I'm creating a basic forum where every message contains the authors name, some text and the date it was created. I'd like the forum to update constantly through AJAX, and show new posts that were created on the fly. I currently have a PHP file getlatest.php?lastid=... that retrieves all posts from the ID given to the most current. It returns the data in HTML, like so (i've altered it so you can see the divs, stackoverflow throws them out):

foreach ($print as $value)
{
    $readyText .= div id = $value->post_id;
    $readyText .= $value->first_name.' '.$value->last_name.' posted the following:'.
    $value->post_text.' The post was made about '.$time.' ago. 
    $readyText .= '/div>'; 
}

I have some AJAX code in jquery that retrieves every few moments

setInterval("update()", 3000);
            function update()
      {
                $.get("getlatest.php", 
       {
                    id: latestmessage
                }, 
       function(response){
                    $("#forum_entries").prepend(response);
        latestmessage = $.cookie('last_post_id'); //This is
                                      //how I know what the latest post id is
                }, "html");

I wanted to highlight all the new posts that were submitted using the (now very popular) yellow fade technique, like so

$("#somediv").effect("highlight", {}, 1500);

My question is - to what div to I apply this effect? I should add that back in PHP, every forum post had a div id that was actually its PK in the database.

Answer 1

Just give your Div an active class:

<?php

foreach ($print as $value)
{
    $readyText .= '<div id = "' . $value->post_id . '" class="active"';
    $readyText .= $value->first_name.' '.$value->last_name.' posted the following:'.
    $value->post_text.' The post was made about '.$time.' ago. 
    $readyText .= '</div>'; 
}

?>



setInterval("update()", 3000);
            function update()
                {
                $.get("getlatest.php", 
                        {
                    id: latestmessage
                }, 
                        function(response){
                    $("#forum_entries").prepend(response);
                    latestmessage = $.cookie('last_post_id');
         $("div.active").effect("highlight", {}, 1500);
         $("div.active").toggleClass("active");

                }, "html");

As I already suggested in an answer to your previous question it would really make sense for you to learn a little bit of JavaScript in combination with one of the popular Libraries/Frameworks (I'd recommend jQuery which the example above uses).

Answer 2

Change your function so that instead of using prepend, it uses prependTo. PrependTo will return the elements that were prepended and you can apply the highlight to those elements (using jQuery 1.3.2).

  $.get('getlatest.php',
        { id: latestmessage }, 
        function(response) {
            $(response).prependTo('#forum_entries').effect('highlight',{},1500);
            latestmessage = $.cookie('last_post_id');
        }, 'html' );

Answer 3

While in loop you may add a fake class attribute to newer post divs... then in your ajax call after prepending to #forum_entries you can apply highlight, remove the class attribute by removeAttr(classname) in Jquery. so on next execution you will have no problem.