SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing class of a TR that was added to the page with AJAX

    Hello everyone,

    My knowledge of this stuff is very limited, so if I describe something poorly please forgive me.

    I have a wordpress theme that has live updating comments (I guess it's called AJAX? right?). Well anyways, when a comment is posted it is automatically updated live on the sidebar, shows the user who posted it and in what article they posted it in.

    Anyways, I wanted to be able to mark those recent comments so I could tell which ones have been read and which have not been read. So I found a code that would change the first TD in the table row. From a yellow background color (unread) to a green background color (read) once the comment has been clicked. This is the code...

    Code:
    <script type="text/javascript">
    
            $(function () {
                $('.p2-recent-comments tr').click(function () {
                    var instance = $(this);
                    instance.find('td:eq(0)') .css('background-color', 'Green');
                });
            });
    
        </script>
    This works great for when you load the page and see the recent comments on the right, I can click them and the yellow TD box turns green. Where it goes wrong is when a new comment is posted and is added to the recent comments with AJAX, this no longer works... there is no effect. Clicking a fresh comment results in no TD change.

    Here is just a small bit of the code that loads in each table row to the recent comments
    Code:
    	$row  = "<tr>";
    		if ( !$no_avatar) $row .= "<td style='background-color: #f5dc0b;'>&nbsp;</td><td title='$author_name' class='avatar' style='height: ${avatar_size}px; width: ${avatar_size}px'>" . $avatar . '</td>';
    
    		$post_title = esc_html( strip_tags( get_the_title( $comment->comment_post_ID ) ) );
    		$excerpt = wp_html_excerpt( $post_title, 30 );
    		if ( $post_title != $excerpt ) $post_title = $excerpt.'&hellip;';
    
    		$comment_content = strip_tags( $comment->comment_content );
    		$excerpt = wp_html_excerpt( $comment_content, 50 );
    		if ( $comment_content != $excerpt ) $comment_content = $excerpt.'&hellip;';
    
    		$comment_url = P2_Recent_Comments::comment_url_maybe_local( $comment );
    
    		$row .= sprintf( '<td class="text">'.__( "%s on <a href='%s' class='tooltip' title='%s'>%s</a>" , 'p2' ) . '</td></tr>', $author_html, esc_url( $comment_url ), esc_attr($comment_content), $post_title );
    		return $row;
    As you can see by the bold, that's the yellow TD that will change green onclick. Like I said, it just doesn't do it for freshly loaded comments.

    How can I get this code to apply to all new live comments that are being loaded in, in real time? The theme on wordpress I'm using is called "p2", hopefully someone/anyone is familiar with it.


    Any help would be appreciated
    Thank you

  2. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this is the right section or not. If not, could someone tell me which one I should have posted this in?

    Thank you.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found out the problem.

    I changed
    Code:
    <script type="text/javascript">
    
            $(function () {
                $('.p2-recent-comments tr').click(function () {
                    var instance = $(this);
                    instance.find('td:eq(0)') .css('background-color', 'Green');
                });
            });
    
        </script>
    to this
    Code:
    <script type="text/javascript">
    
            $(function () {
                $('.p2-recent-comments tr').live('click', function () {
                    var instance = $(this);
                    instance.find('td:eq(0)') .css('background-color', 'Green');
                });
            });
    
        </script>
    and it worked

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,164
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Great that you got it sorted. Thanks for posting the solution.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •