Question

I would like to be able to star/un-star any given conversation (like Gmail for example.) When I click the “empty” star to mark something as important, I need to submit some ajax and then toggle to the star image. And visa versa, when I click a starred conversation, I need the ajax to submit and upon its success, then have “empty” star toggled back.

Some HTML (in a nutshell):

 <div class='__conversation'>
      <div class='__conversation_star'>
         <img class='__star_n' src='p_star_n.png'/>
         <img class='__star_y' src='p_star_y.png'/>
      </div>
 </div>

And something with similar functionality to a basic:

    $(".__conversation_star").click(function() {
         $(this).find('img').toggle();
    });

Some ajax:

 $(".__conversation_star").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: "./process.conversation.php,
        data: {method: 'star'},
        cache: true,
        success: function() {
            // Toggle to un-starred .__star_n
        }
    });
 });

 $(".__conversation_star").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: "./process.conversation.php",
        data: {method: 'star'},
        cache: true,
        success: function() {
            // Toggle to starred .__star_n
        }
    });
 });

Is there a way I can perform a toggle upon success of the ajax? and/or what other methods of doing this are there that will work better?

Thank you!

Answer 1

Instead of toggling which image shows, it might be easier to toggle a CSS class instead. So if your HTML was set up like this:

<div class="conversation">
    <span class="star"></span>
    <span>blah blah blah blah</span>
</div>

and then you had the following CSS:

.conversation{
    padding:3px 5px;
    border: 1px solid #CCC;
    margin-top:3px;
}

.star{
    background-color: hsl(200, 90%, 90%);
    border:1px solid #333;
    display:inline-block;
    height:20px;
    width:20px;
}

.star.state-selected{
    background-color: hsl(60, 70%, 60%);
}

Now all you have to do is toggle the class state-selected on each <span class='star'>

Here is some example JavaScript

$(".star").click(function() {
    var $thisStar = $(this);
    
    $.ajax({
        type: 'POST',
        url: "./process.conversation.php",
        data: {method: 'star'},
        cache: true,
        success: function() {
            $thisStar.toggleClass("state-selected");
        }
        
    });
    
});

---

DEMO: http://jsfiddle.net/fbvg9/