gmail like star button -jquery problem - php

Question

I've built star button to use it like "starred items". I have the code running. but i have a problem.
When i click on star it becomes a starred item and and the star image changes.
But when i click again to unstar, it just doesn't work. i need to refresh the page to unstar it.
Also even the first step doesn't work for chrome.
add star codes:
jquery
$(function() {
$(".yildiz").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "yildizekle.php",
data: dataString,
cache: false,
success: function toggle()
{
$('.yildizbutton'+id).animate({
src:"star-icon.png",
class:"yildizsizbutton"+id,
},0);
}
});
return false;
});
});
php:
<img class="yildizsizbutton'.$row['id'].'" border="0" src="star-icon.png" alt="Yildizi kaldir" width="16" height="16" />
remove star
$(function() {
$(".yildizf").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "yildizsil.php",
data: dataString,
cache: false,
success: function toggle()
{
$('.yildizsizbutton'+id).animate({
src:"star-icon-f.png",
class:"yildizbutton"+id,
},0);
}
});
return false;
});
});
php:
<img class="yildizbutton'.$row['id'].'" border="0" src="star-icon-f.png" alt="Yildiz ekle" width="16" height="16" />

Answer 1

To add the star, do something similar to this:
$("#"+id).find("img").attr("src", "star-icon.png");
To remove:
$("#"+id).find("img").attr("src", "sstar-icon-f.png");
You shouldn't use animate in the way you are using it at all. I also used the ID of the container, then found the image inside of it, instead of putting together that class like you were doing. That's just personal preference, though...the main takeaway is to use attr("src") to set the src of an image in jQuery.
EDIT: Here is a full solution that should work.
$(function() {
$(".star").click(function() {
var id = $(this).attr("id");
if($(this).hasClass("starred")) {
$.post("yildizekle.php", {id: id}, function(resp) {
$(this).removeClass("starred").find("img").attr("src", "star-icon-f.png");
});
}
else {
$.post("yildizsil.php", {id: id}, function(resp) {
$(this).addClass("starred").find("img").attr("src", "star-icon.png");
});
}
return false;
});
});
Notice that we are using a class to track whether or not the element is already starred. This means in your PHP you will need to add the starred class to any elements that are already starred when the page loads. Also, I used $.post instead of $.ajax since it is a simpler way of doing the same thing.

Answer 2

There are a few problems in your code, and both of the answers here are relevant and both are correct. Being as green as you are, I'd say you are on the road to learning well.
I'd use a separate class for ALL of the stars, one that doesn't relate to if its starred or unstarred. Maybe something like 'star'. :) You need to refresh the page to un-star it is because you never actually change it on the FRONT-end to be starred. If you use a tool like firebug of WebKit's Web inspector, you'll see that the class of the link is still "yildiz".
I'm not going to give you a complete answer because I'd be robbing you of an awesome learning experience here. Here are some pointers:
Remember which objects your click() events are connected to: $(".yildizf") and $(".yildiz")
When you click on an item, does it actually change class so that jQuery knows it's different? Essentially, you are 'starring' the same item over and over again because you never allow jQuery to see it as something it needs to un-star
If you use a 'star' class in addition to the other class (like <a class="star yildiz" ...>), then you can attach your click event to $('a.star'), and figure out in THERE if you should be starring or unstarring the item.
I hope this all makes sense.

Answer 3

You've defined the click event to both star and un-star the item. In the event you need to look at the current state of the item then decide if you want to star or un-star it. you need to branch inside your click event.