jQuery Css Class not set Corectly

Question

I'm trying to implement a starring system akin gmail, being able to mark an item important by clicking on a graphic.

if($starred == 1){
        $starred = '<img class="starred" id="row_'.$trouble_ticket_id.'" src="images/icons/silk/award_star_gold_3.png" alt="Star">';
    }
    else{
        $starred = '<img class="unstarred" id="row_'.$trouble_ticket_id.'" src="images/no_star.png" alt="No Star">';
    }

$content.= '<td><a href="ticketEdit.php?id='.$trouble_ticket_id.'"><img src="images/icon_edit.png" alt="Edit" /></a></td><td><a href="adminTicketDetail.php?id='.$trouble_ticket_id.'">'.$ticket_code.'</a></td><td>'.$requested_by.'</td><td>'.$department.'</td><td>'.$telephone.'</td><td>'.$room_number.'</td><td>'.$subject.'</td><td>'.$original_date_request.'</td><td style="text-align: center;">'.$starred.'</td>';


<script type="text/javascript">
    $(document).ready(function() {
        $("img.unstarred").click(function(){
            $(this).attr("src", "images/icons/silk/award_star_gold_3.png");
            $(this).attr("alt", "Starred");
            $(this).removeClass('unstarred').addClass('starred');
            $.get("star_it.php", { id: $(this).attr("id") } );
        });
        $("img.starred").click(function(){
            $(this).attr("src", "images/no_star.png");
            $(this).attr("alt", "Unstarred");
            $(this).removeClass('starred').addClass('unstarred');
            $.get("star_it.php", { id: $(this).attr("id") } );
        });
                 }); 
    }); 
</script>';

As you can see upon the click of the image it send an ajax request to star_it.php with the URL variable attached to it corresponding to the ID of the element clicked.

This works fine on the first click, it changes the image, the ALT text and the class using jQuery. However, upon successive clicks, it seems that the original path is still taken.

So if the image is starred after the first click, jQuery will continue to star the item (at least on the webpage). I have used Firebug to determine that this is in fact happening. On first run it will change a non-starred image to starred and make the change in the database. On second click and further clicks, it still goes through the $("img.unstarred").click(function()) when it should be going through the img.starred function and marking the image unstarred.

I do all this by removing and adding css classes. When a starred img is clicked i remove the starred css class and add the unstarred css class. However, this does not seem to be working. I really can't use the ID of the img for onclick because it is dynamically generated.

Any ideas?

Answer 1

You are applying a function to an element that does not yet exists. The better way would be to merge the 2 functions and "toggle" based on the current state.

$("img.star").click(function(){
// get the value
var starred = $(this).attr("alt");
if (starred == 'unstarred') // star it
{
            $(this).attr("src", "images/icons/silk/award_star_gold_3.png");
            $(this).attr("alt", "Starred");
            $(this).removeClass('unstarred').addClass('starred');
            $.get("star_it.php", { id: $(this).attr("id") } );
       } else { // unstar it
            $(this).attr("src", "images/no_star.png");
            $(this).attr("alt", "Unstarred");
            $(this).removeClass('starred').addClass('unstarred');
            $.get("star_it.php", { id: $(this).attr("id") } );
}
        });

You can clean that up a bit- but you get the idea.

Answer 2

Consolidate it down in to one function and use css to give a div's the correct background image rather than assigning an image different sources. Use the power that css gives you.

<style>
.unstarred{
    background: url(images/no_star.png);
}
.starred{
    background: url(images/icons/silk/award_star_gold_3.png);
}
</style>

<div class="star unstarred" />

Your javascript would be simply this then since your star_it.php knows own to toggle based on the id sent to it.

$(document).ready(function() {
    $("div.star").click(function(){
        $(this).toggleClass('unstarred').toggleClass('starred');
        $.get("star_it.php", { id: $(this).attr("id") } );
    });
});