Question

i have an inbox section on my site where users can click the subject heading to open a window and read their messages.

I have put in a javascript function that highlights the inbox messages as they move the cursor along. I have made the highlight clickable and it’s suppose to go to the same location as if the user clicked on the subject link and whilst it goes to the window read_message.php its not loading the message id and the message wont show.

Heres the subject link that works:

<?php echo "<strong><a href=\"read_message.php?msg={$inbox['message_id']}\">{$inbox['subject']}</a></strong>"; ?>

and heres the javascript with link that isn’t working:

<script>
     $(function() {
        $('tr').hover(function() {
            $(this).css('background-color', '#eee');
            $(this).contents('td').css({'border': '0px solid red', 'border-left': 'none', 'border-right': 'none'});
            $(this).contents('td:first').css('border-left', '0px solid red');
            $(this).contents('td:last').css('border-right', '0px solid red');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
            $(this).contents('td').css('border', 'none');
            $('tr').click(function() { 
    document.location = "<?php echo "read_message.php?msg={$inbox[0]}" ?>";
} );
        });
    });
    </script>

hope someone can let me know where i’m going wrong. thanks.

Answer 1

Firstly you should move the .click() function so it’s not inside your .hover() function – otherwise the click handler gets set every time you mouse out of the row, and it won’t work the first time you mouse over.

Once that’s done, you could do this:

$("tr").click(function() {
  location.href = $(this).find("a[href*='read_message.php']").attr("href");
});

(Not 100% certain on the .find() syntax since I don’t really use jQuery, but this should help)