I have a project that I am working on that uses a little image to mark a record as a favorite on multiple rows in a table. The data gets pulled from a DB and the image is based on whether or not that item is a favorite. One image for a favorite, a different image if not a favorite. I want the user to be able to toggle the image and make it a favorite or not. Here's my code:

$(function () {
    $('.FavoriteToggle').toggle(
      function () {
        $(this).find("img").attr({src:"../../images/icons/favorite.png"});
        var ListText = $(this).find('.FavoriteToggleIcon').attr("title");
        var ListID = ListText.match(/\d+/);
        $.ajax({
            url: "include/AJAX.inc.php",    
            type: "GET",
            data: "action=favorite&ItemType=0&ItemID=" + ListID,        
            success: function () {}     
        });
      },
      function () {
        $(this).find("img").attr({src:"../../images/icons/favorite_not.png"});
        var ListText = $(this).find('.FavoriteToggleIcon').attr("title");
        var ListID = ListText.match(/\d+/);
        $.ajax({
            url: "include/AJAX.inc.php",    
            type: "GET",
            data: "action=favorite&ItemType=0&ItemID=" + ListID,        
            success: function () {}     
        });
      }
     );
});

Works great if the initial state is not a favorite. But you have to double click to get the image to change if it IS a favorite initially. This causes the AJAX to fire twice and essentially make it a favorite then not a favorite before the image responds. The user thinks he's made it a favorite because the image changed, but in fact, it's not. Help anybody?