Question

i am using cluetip jquery plugin and i show a popup with some html (using local source hidden div). I now have some jquery that wants to change one icon with another and i have the following code:

 var img = "#mySelector";
 $(img).attr("src", "/content/images/ajax-loader.gif");

this works fine when this image is on the regular page but when its inside a popup, the image doesn’t change. Is there any way to change the html on a tooltip popup while it is up in cluetip jquery plugin?

I know that the selector is correct because, I also have this line:

 var img = "#mySelector";
 var currentSrc = $(img).attr("src");

and currentSrc reads the current string.

NOTE:

Also, in firebug when i look at

 var currentSrc = $(img).attr("src");

AFTER i change the source to

/content/images/ajax-loader.gif

it does read:

 /content/images/ajax-loader.gif

so it looks like the code is working but the image is simply not changing .. .

Answer 1

Looking at the clueTip options, you probably want to set a handler for either onActivate() or onShow() so you can make the image URL change at the appropriate time.

Edit: Since you’ve edited your post to show that the .src is actually changing, then the only possible explanations are:

1. You’re changing the wrong object
2. The .src value is the wrong/bad URL
3. Some other piece of code is changing the URL back again.

The most likely would be that you’re changing the wrong object and the most likely way that could happen is if you have the wrong ID value or if you have more than one object with that ID.

There should only ever be one object with a given ID and if there are more than one, a selector using that ID will probably only return the first one with that ID – though that is not a behavior which should be relied upon.