0

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 .. .

leora
  • 188,729
  • 360
  • 878
  • 1,366

2 Answers2

2

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • img is actually a variable where i am passing in "#abc" selector – leora Jan 06 '12 at 22:54
  • also, I am calling this javascript while the tooltip is up so i don't want to call this right when its being shown . . i need it to change while it is up . i maybe need a refresh api command or something . . i would have thought it would work given that its changing a single DOM selector – leora Jan 06 '12 at 22:55
  • If it's not changing, then it's probably because the object isn't being found. You should do a `console.log($(img).length)` right before you set the `.src` and see if the object is being found or not. If `.length` is 0, then it's not being found. – jfriend00 Jan 06 '12 at 22:57
  • its definately being found because i have this line before it to read the current src . .: $(img).attr("src") and that retrieves the correct value. I have edited the question to clarify – leora Jan 06 '12 at 23:01
  • @leora - If `.src` is changing, but you're not seeing the image change, then you're either targeting the wrong object, the URL is bad or wrong or something else is setting the URL back to its original value. There are no other choices here. Browsers don't accept a new `.src` and then not show it if there's nothing wrong with the URL. We probably can't help further without seeing the page with this in it so we can see what else is actually going on here. – jfriend00 Jan 06 '12 at 23:30
  • @leora - is there any chance you have more than one object with that id value? The browser will generally only target the first one in the page and by spec, you can only have one object with a given ID value. If you had multiple, then perhaps the wrong object is being changed. – jfriend00 Jan 06 '12 at 23:32
  • i change the id attribute to a class attribute and everything works now. I think cluetip must be copying the html but keeping the existing html in the hidden div, thus being 2 elements with the same Id . . making it a call on .src on the class selector makes everything work – leora Jan 07 '12 at 04:17
  • @leora - After viewing the cloneTip source code, it does appear that (when using local content) it makes a clone of that content which could cause the problem you experienced. – jfriend00 Jan 07 '12 at 05:16
0

The cluetip plugin clones the (local) content and adds an suffix to id's (because id's neet to be unique), you can set the suffix with localIdSuffix: 'MySuffix' in the cluetip options. You need to find the inserted (and hidden) cluefix div and change the value(s) there.

anon
  • 1