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

CMS & WordPress
1

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…

<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

	$row  = "<tr>";
		if ( !$no_avatar) $row .= "[B][U]<td style='background-color: #f5dc0b;'>&nbsp;</td>[/U][/B]<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

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

I found out the problem.

I changed

<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

<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

Great that you got it sorted. Thanks for posting the solution. :slight_smile: