Implement read/unread like in email

Question

Hello Guys i am trying to implemenet something like the read/unread in the email.How can i do so by using jquery , php and mysql. What i want to do in steps:

1- When i click on a row in html table i change the status of the this message in database. 2- And then change the background of this row but also if i logout and relogin the row remains changed. 3- knowing that i am already using css classes for the table rows.

What i have done till now is that i changed the status of this specific messages in database with an update.

Regards.

Answer 1

I can't give you all the code, because that is just a little too much, but here is how I would do it:

1. With jQuery, assign a function to the table rows onChange event.
2. That function uses AJAX to notify the server of the status change for that event.
3. The server updates the status for that particular row.
4. It could send back the HTML code for that row or you could just change the class using jQuery.
5. Since the status is now changed in the database, the right status will be displayed after logging in again, since the page will be loaded from the server in that case (I'm assuming that)...

You have to think about what you want to do for people with JavaScript support disabled, too.

If you need more help coding-wise, comment!

Answer 2

If it's a production site, you're probably going to want to provide a javascript-less solution anyway, so if you change pages on the click, then you never need to get javascript involved at all. Create a "read" boolean field in the database that is 0 by default. When you click through to view the record, keep the record id in the url, and change "read" to 1 for that record via php in the page that you get to after clicking through.

If you're looking to stay on the same page after the click, then you'll need to get javascript involved, as Franz mentions above, but it's good to do it in a progressive enhancement way, with the javascript as added value, and the basic functionality available underneath anyway.

Answer 3

Maybe I could have formatted this better but this should work in terms of the concept you are looking for.

Loop over email result set.

<tr class="email_unread"><td><img class="email" id="email_id_'.$email_id.'" /></td><td> '.$email_subject.' </td></tr>

You would set the class to either email_read or email_unread depending on whether or not the email has been read. if($email_read = 1) $css = "email_read"; else $css = "email_unread";

Use jQuery to do the Dirty Work.

<script type="text/javascript">
        $(document).ready(function() {
            $("img.email").click(function(){

                    $.get("emailRead.php", { id: $(this).attr("id") } );
                    $(this).parent().parent().removeClass('email_unread').addClass('email_read');

            });

        }); 
    </script>

This would be emailRead.php

connect_db(); // CONNECT TO DB

$id = $_GET['id'];
$id = str_replace("email_id_","",$id);

$query="UPDATE email SET email_read = 1 WHERE email_id = '$id'";

$getResults=mysql_query($query) or die(mysql_error());

Here you grab the GET var, trim the email_id_ part to just get the number and then use it in the update query. Of course you would have to do Security checks on what is coming into emailRead.php