Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

showing tooltip makes id undefined via jQuery

I'm not able to figure out what is causing this behavior. Here is the page in question:
http://www.kerbalspace.agency/Tracker/craft.asp?db=dtptest

Take a look at the Resources listing for the craft, where there are icons shown and two arrow images. If you click on the arrow images the icons will scroll left & right to show more resources the craft is carrying onboard. It is setup like this, using vbscript since I'm also performing some ASP database info grabbing in this section of code:

response.write("t'><u>Resources</u><span>:</b> <img id='prevRes' src='prevList.png' style='display: none; cursor: pointer'> ")
response.write("<div id='res0' style='display: none'>temp</div>")
response.write("<span style='cursor:help' class='tip-update' data-tipped-options=""inline: 'res0'"">")
response.write("<img id='resImg0' src='' style='display: none'></span> ")
response.write("<div id='res1' style='display: none'>temp</div>")
response.write("<span style='cursor:help' class='tip-update' data-tipped-options=""inline: 'res1'"">")
response.write("<img id='resImg1' src='' style='display: none'></span> ")
response.write("<div id='res2' style='display: none'>temp</div>")
response.write("<span style='cursor:help' class='tip-update' data-tipped-options=""inline: 'res2'"">")
response.write("<img id='resImg2' src='' style='display: none'></span> ")
response.write("<div id='res3' style='display: none'>temp</div>")
response.write("<span style='cursor:help' class='tip-update' data-tipped-options=""inline: 'res3'"">")
response.write("<img id='resImg3' src='' style='display: none'></span> ")
response.write("<div id='res4' style='display: none'>temp</div>")
response.write("<span style='cursor:help' class='tip-update' data-tipped-options=""inline: 'res4'"">")
response.write("<img id='resImg4' src='' style='display: none'></span> ")
response.write("<img id='nextRes' src='nextList.png' style='display: none; cursor: pointer'></td></tr>")


So I have 5 images with accompanying inline tooltips to dynamically update with jQuery. Here's how I initially load the images:

var resIndex = 0;
if (resources.length) {
if (resources.length > 5) {
$("#prevRes").fadeIn();
$("#nextRes").fadeIn();
}

for (x=0; x<5; x++) {
if (x == resources.length) { break; }
$("#res" + x).html(resources[x].Title);
$("#resImg" + x).attr("src", resources[x].Img + ".png");
$("#resImg" + x).fadeIn();
}
}


and here is how I update the images/tips:

$("#prevRes").click(function(){
resIndex--;
if (resIndex < 0) { resIndex = 0; }
for (x=0; x<5; x++) {
$("#res" + x).html(resources[resIndex+x].Title);
console.log($("#res" + x).html());
$("#resImg" + x).attr("src", resources[resIndex+x].Img + ".png");
$("#resImg" + x).fadeIn();
}
});
$("#nextRes").click(function(){
resIndex++;
if (resIndex == resources.length-4) { resIndex = resources.length-5; }
for (x=0; x<5; x++) {
$("#res" + x).html(resources[resIndex+x].Title);
console.log($("#res" + x).html());
$("#resImg" + x).attr("src", resources[resIndex+x].Img + ".png");
$("#resImg" + x).fadeIn();
}
});


Now here's how to see the issue. Load the page and without hovering over any of the resource icons click the left/right arrows. In the console log you'll see all 5
elements update as you scroll left and right. Now, choose one resource icon and hover your mouse cursor over it to show the tooltip. Don't hover over any others and click either the left/right arrows again and the console log will spit out "undefined" for the
you just hovered over. Show all 5 tooltips and the log will show 5 "undefined" reports.

As far as I can tell I'm doing exactly what I do to update other dynamic tooltips on the page (hover over the underlined text for the Launched field to see the mission timer tick up, and hover over the underlined text for Last Update to see the distance traveled counter tick up). For example here's the mission timer:

// setup
response.write("<div id='met' style='display: none'>" & launchmsg & "</div>")
response.write("<span style='cursor:help' class='tip-update' data-tipped-options=""inline: 'met'"">")
response.write("<u>" & rsCraft.fields.item("LaunchDateUTC") & " " & datestamp & "</u></span>")

// update
$("#met").html(strMsg + formatTime(Math.abs(MET), false));

// update all tips, done once per second
Tipped.refresh(".tip-update");


It's also strange that the images continue to update just fine, but the
s for the tooltips get messed up somehow.

Tested on both Firefox and Chrome.

Comments

  • oops, I didn't realize this would parse HTML. The line breaks in the above paragraphs are where I wrote "div" in angled brackets
  • edited February 2016
    I guess you are updating the inline elements at some point. Keep in mind that tooltips detach themselves from the DOM by default.

    If you call $('#resTip1'); it'll return an element only if you didn't pull it into a tooltip yet. Once it's pulled in and the tooltip hides, calling $('#resTip1'); will return nothing since the element is detached from the DOM.

    Use detach: false to avoid that behavior, it'll allow you to update the inline elements at any time.
  • edited February 2016
    okay, adding the detach: false option fixed it. Thanks!

    I'll admit though I still don't understand how what I'm doing with the resource icon tooltips is different from what I'm doing with the elapsed time tooltip I also gave an example of, which doesn't need the flag set to false to work just fine when it is updated every second (instead of every mouse click on the left/right arrows like the resource tips).
  • Perhaps calling functions every second caused an update as the tooltip was still attached to the DOM. Relying on timers to solve the issue is not reliable, that's why you need detach: false to make sure it works every time.
Sign In or Register to comment.