Favorites star switching in Javascript

Question

A good example is the SO star on the left hand side of this post.

You can click on it to add this message in your favorite and click again to remove this flag.

I already create a page /favorites/add/{post_id}/ but how to handle that in Ajax ?

Many things to do :

• Be sure that it worked when you click
• Change the image
• Change the link if it is to add or remove the flag.

I am sure such a thing already exists, but I couldn't find it.

Any idea ?

Answer 1

In javascript you add a event handler to the icon on the onclick event.

Then you can just change the src attribute in the img element to change it to the correct image.

I would suggest just sending the notification to the server and it can return the correct image to display, and then you just update the src attribute on the img element.

The reason I would put the business logic on the server is to ensure that if for some reason the database was out of sync, it would show the correct result of the database, which is also the case if there was an error while changing the database.

Answer 2

what JavaScript library are you using? might wanna check out Prototype.js