reload a table after link click to update results

Question

Hello,

I am have a table that shows the user suggestions that they have recieved on clicking read more some ajax is fired and in the database the suggestion is marked as read. Currently if the suggestion is new I show a closed envelope, if it is read I show an open envelope, however I can get it to reload the table when the user clicks the read more link so that the new class can be added. Currently it half works, they click read more and the full suggestions fades in but I need the envelope to change also.

    <table>
        <?php
            $colours = array("#f9f9f9", "#f3f3f3"); $count = 0;
            if(isset($newSuggestions)) {
                foreach($newSuggestions as $row) {
                if($row['commentRead'] == 0) {
                    $newRow = "new";
                } else {
                    $newRow = "old";
                }
        ?>
                        <tr id="a<?=$row['thoughtId'];?>" bgcolor="<?php echo $colours[$count++ % count($colours)];?>">
        <?php
                            echo "<td class='".$newRow."'>".substr($row['thought'], 0,50)."...</td>";
                            echo "<td class='read'><a href='".base_url()."thought/readSuggestion/".$row['thoughtId']."' class='readMore'>Read More</a>";
                        echo "</tr>";
                    }
                } else {
                echo "You have no new suggestions";
                }
        ?>
        </table>
    </div><!--/popular-->

    </div><!--/widget-->
        <div id="readMore">

        </div>

<script type="text/javascript">
    $(document).ready(function() {
    //alert("hello");
    $('#tabvanilla').tabs({ fx: { opacity: 'toggle', height:'toggle' } });
        $('a.readMore').click(function(){
            $('#readMore').fadeIn(500);
            var url = $(this).attr('href');

            $.ajax({
                url : url,
                type : "POST",
                success : function(html) {
                    $('#readMore').html(html)
                },
                complete : function(html) {
                    $('table').html()
                }
            });
            return false;
        });
});
</script>

Answer 1

In the JavaScript where you open/fill in the full suggestions, you can modify the envelope image as well, using something like:

$('#envelope').attr('src', 'src/to/envelope.png');

I see no img tags, so you need to add one and fill in the id, so it is found by the JavaScript.

BTW: Having HTML and PHP on the same lines/parts, makes the total very unreadable. Only use <?php ... ?> for large PHP code blocks, otherwise use echo (or something similar).