I have the following code (asp.net-mvc, jquery) (i have simplified the example to show the issue) where i want to click on an
image and have it replaced with another
image.
This works fine but the first time i click it, the original
image disappears (for a split second) before the other
image shows up. After that it works seamlessly.
Is there any way to eliminate this quirk so there is not split second where no
image is shown?
Here is my controller code:
public ActionResult UpdateFavoriteExercise(int id, string toggle)
{
if (toggle == "off")
{
return Content("<img toggle='off' src='/images/vote-favorite-off1.png' border=0'>");
}
return Content("<img toggle='on' src='/images/vote-favorite-on1.png' border=0'>");
}
Here is my jquery code:
$('div.favoriteExercise').live('click', function() {
var id = $(this).attr("id");
var toggle = $(this).attr("toggle");
if (toggle == 'off') {
onOff = 'on';
}
else {
onOff = 'off';
}
var url = '/Tracker/UpdateFavoriteExercise/' + id + '?toggle=' + onOff;
$(this).load(url);
$(this).attr("toggle", onOff);
});
