I have a qTip tooltip where I'm loading its content via ajax. After the content is loaded I need to call a function someFunction()
$('.element').qtip(
{
content:
{
text: function(event, api)
{
api.elements.content.text('Loading...');
var content = $.ajax(
{
url: 'loadcontent.php',
dataType: 'json'
})
.then(function(result)
{
// Some code for changing result html
return result.html;
}, function(xhr, status, error)
{
api.set('content.text', 'Error');
});
// Calling a function, but it's too early (content is still not in the tooltip)
someFunction();
return content;
}
}
});
To be honest I'm not sure where to put someFunction() so it's called after the content is added into the tooltip. There is no event which is fired after the content is changed.
I came up with a solution:
$('.element').qtip(
{
content:
{
text: 'Loading...'
},
events:
{
show: function(event, api)
{
$.ajax(
{
url: 'loadcontent.php',
dataType: 'json'
})
.then(function(result)
{
api.set('content.text', result.html);
someFunction();
}, function(xhr, status, error)
{
api.set('content.text', 'Error');
});
}
}
});