Javascript execute code in certain order

Question

In my assignPopups(), I need to call a retrievePopupText() to populate my mouseOverText variable. When it runs, mouseOverText variable shows as undefined in the popup. The popup and lookup works, but I cannot figure out how to get the popup text value populated before showing the popup. Can someone show me how to structure my code to get it to work in the correct order? My lookup is hard coded right now, but I will be changing that to work for many links when I get this working.

var mouseOverText;

function assignPopups(selector) {
    $(selector).hover(
        function (b) {
            if ($(this).attr('title')) {
                $(this).data('title', $(this).attr('title'));
                $(this).removeAttr('title');
            }

            if ($(this).data('title')) {
                var bkgColor = $(this).closest("td").css("background-color");

                rgb2hex(bkgColor);

                if (bkgColor === null || bkgColor === undefined) {
                    bkgColor = "#4aacc5";
                }

                var Definitions;

                retrievePopupText("data/definitions.json", 'LinkID', 'a2');

                var html = '<div id="titlePopup" class="tooltip info" style="background-color:' + bkgColor + '; display: block; top: '
                    + (b.pageY + 10)
                    + 'px; left: '
                    + (b.pageX + 20)
                    + 'px;">'
                    + '<span id="temp">' + mouseOverText + '</span>'
                    + '</div>';

                timerPopup = setTimeout(function () {
                    $('div#titlePopup').remove();
                    $('body').append(html);
                }, 800);
            }
        },
        function () {
            clearTimeout(timerPopup);
            $('div#titlePopup').remove();
        });
}


function retrievePopupText(path, key, id) {
    var item;

    $.getJSON(path)

    .done(function (data) {
        if (!data) {
            return
        }
        $.each(data.Definitions, function (i, val) {
            if (val.LinkID === id) {
                mouseOverText = val;
            }
        })
    })
    .then(function (data) {
    })
    .fail(function (e) {
    });
}

Orpheus · Accepted Answer · 2015-06-05 15:37:04Z

1

You need to make the call using $.ajax() to it synchronously, like this:

$.ajax({
  url: 'data/definitions.json',
  dataType: 'json',
  async: false,
  success: function(data) {
    //stuff
    //...
  }
});

$.getJSON is asynchronous, meaning it runs independently of your program. Basically, your code is expecting something when it's not loaded and ready.

Once your call gets into the success function, then do all your popup handling below the original retrievePopupText function;

answered Jun 5, 2015 at 15:37

Orpheus

7871 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wannabe Over a year ago

Ah, yes...I keep forgetting about the async: false. Thanks.

alexrogers · Accepted Answer · 2015-06-05 15:40:21Z

Call your assignPopups method from within your done callback:

var mouseOverText;

function assignPopups(selector) {
    $(selector).hover(
        function (b) {
            if ($(this).attr('title')) {
                $(this).data('title', $(this).attr('title'));
                $(this).removeAttr('title');
            }

            if ($(this).data('title')) {
                var bkgColor = $(this).closest("td").css("background-color");

                rgb2hex(bkgColor);

                if (bkgColor === null || bkgColor === undefined) {
                    bkgColor = "#4aacc5";
                }

                var Definitions;

                retrievePopupText("data/definitions.json", 'LinkID', 'a2');

                var html = '<div id="titlePopup" class="tooltip info" style="background-color:' + bkgColor + '; display: block; top: '
                    + (b.pageY + 10)
                    + 'px; left: '
                    + (b.pageX + 20)
                    + 'px;">'
                    + '<span id="temp">' + mouseOverText + '</span>'
                    + '</div>';

                timerPopup = setTimeout(function () {
                    $('div#titlePopup').remove();
                    $('body').append(html);
                }, 800);
            }
        },
        function () {
            clearTimeout(timerPopup);
            $('div#titlePopup').remove();
        });
}


function retrievePopupText(path, key, id) {
    var item;

    $.getJSON(path)

    .done(function (data) {
        if (!data) {
            return
        }
        $.each(data.Definitions, function (i, val) {
            if (val.LinkID === id) {
                mouseOverText = val;
            }
        })
        assignPopups('.your-selector'); // e.g. here
    })
    .then(function (data) {
    })
    .fail(function (e) {
    });
}

Collectives™ on Stack Overflow

Javascript execute code in certain order

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related