Home Ask Login Register

Developers Planet

Your answer is one click away!

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


Quote of the day: live life