CODEWITHSUNDEEP
javascriptjqueryjson
Jym Morrison
Jym Morrison

Reputation: 185

Use data from getJSON to populate tooltips

If I'm correct getJSON cannot return the words as it is an asynchronous method. How can I improve the following piece of code to populate the title with the variable called words that contains the data I want to push in the tooltip title attribute?

$('.multiselect-container li').not('.filter, .group').tooltip({
    placement: 'right',
    container: 'body',
    title: function () {
        var req = $.getJSON('localfile.json', function(data) {
            var words = data["blarg"]["something"];
        });
        return "content"; // words variable should fit here
    }
});

Upvotes: 0

Views: 145

Answers (2)

Khalid
Khalid

Reputation: 4808

I think one of the solutions is to call an ajax function synchronously. here's an example

function getData()
{
        if (window.XMLHttpRequest)
                AJAX=new XMLHttpRequest(); 
            else
                AJAX=new ActiveXObject("Microsoft.XMLHTTP");
            if (AJAX)
            {
                AJAX.open("GET", "localfile.json", false);
                AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                AJAX.send();
                return JSON.parse(AJAX.responseText);                                         
            } 
            else
                return null;
}

Then all you need to do in your code is this :

$('.multiselect-container li').not('.filter, .group').tooltip({
    placement: 'right',
    container: 'body',
    title: getData
});

Upvotes: 0

PitaJ
PitaJ

Reputation: 15074

Put the tooltip creation inside the ajax callback function

$.getJSON('localfile.json', function(data) {
  var words = data["blarg"]["something"];
  $('.multiselect-container li').not('.filter, .group').tooltip({
    placement: 'right',
    container: 'body',
    title: function () {
      return words; // words variable should fit here
    }
  });
});

Upvotes: 3

Related Questions