SeattleAls February 2016

Title gets undefined when hovered (jQuery UI Tooltip)

The following code is run every second in setInterval:

for (i = 0; i < mt1.length; i++){
    $(mt1[i]).each(function(){
        $(this).attr('title', $(this).attr('title').split(" ")[0] + " " + $(this).attr('title').split(" ")[1]);
    });
}

title = "<img src='/flags/4x3/cn.svg' width='20px'' height='20px'> " + accounting.formatMoney(accounting.unformat($(this).html().split(" ")[0].substr(2).slice(0, -1)) * -6, '¥', 2, ",", ".");
$(this).attr('title', title + '|' + $(this).attr('title'));

What is happening is when not hovered, inspecting the element shows all correctly, the text is blinking every second as stated in the setInterval() method: <span title="55 tests |<img src='/flags/4x3/cn.svg' width='20px'' height='20px'> ¥1.90</span>

But after it gets hovered, it shows undefined instead of 55 tests. What's happening?

This is shown in console.log after hovering:

undefined |<img src='/flags/4x3/cn.svg' width='20px'' height='20px'> ¥1.90

UPDATE:

Seems like tooltip (jQueryUI Tooltip) I am using has something to do with it, the next code is in the beginning of the page. What is does, is turns | to <br> to move currency value to the next line:

$(function() {
    $( document ).tooltip({
        content: function(callback)
        {
            callback($(this).prop('title').replace(/\|/g, '<br />'));
        }
    })
});

UPDATE: JSFiddle added:

[https://jsfiddle.net/hrkLssgk/][1]

Answers


Tennyson H February 2016

I'm not exactly sure if you needed your code to be in a setInterval, so I left it. Here is a working fiddle: https://jsfiddle.net/hrkLssgk/2/

Notice we've changed your array to contain a updated flag for each element. Once the element has had it's title updated, it does not go through the updating again until the flag is reverted.

var mt1 = [
    [$("#la"), false] /* first element is jquery, second is flag if it's been updated */
];

iterate through each element, and only execute title-change if it's flag is false:

mt1.forEach(function(){
        if (!mt1[i][1]) {

if setInterval is not necessary, you would be better off moving this logic outside of the setInterval and into a function that is called when needed

Post Status

Asked in February 2016
Viewed 2,353 times
Voted 10
Answered 1 times

Search




Leave an answer