I'm having some trouble with adding tips to a Request.HTML function. I have a div which refreshes its content every 30 seconds. The content returned has a series of divs with the class name ".liveReader".
Here's the JS I have to initiate the content
window.addEvent('domready', initLiveContent);
function initLiveContent()
{
var tips = new Tips('.liveReader');
(function() { refreshPanel() }).periodical(30000);
refreshPanel();
}
function refreshPanel()
{
var myRequest = new Request.HTML({
url: '/inc/liveFeed.aspx',
update: $('liveContent'),
method: 'get',
onComplete: function() {
tips.attach('.liveReader');
}
});
myRequest.send();
}
So the HTML is
<div id="liveContent">
<div id="item1" class="liveReader" title="item 1"><p>Text 1</p></div>
<div id="item2" class="liveReader" title="item 2"><p>Text 2</p></div>
</div>
Yet all I am seeing is the normal tooltip title! any ideas?!!
Your problem is with variable scoping.
Your onComplete
handler uses a reference to tips
, while this variable is local to the initLiveContent
function. Therefore, the onComplete
call fails.
So, first tip (no pun intended): always start with an actual debugger, and set it to break on all exceptions. Otherwise, since the error ("undefined variable tips
") is thrown from within a callback, it won't appear in the standard console.
Then, two ways to fix your code:
Make tips
a shared variable. You might for example declare it in a function that would be the second argument to your window.addEvent
call, and then reference it in both initLiveContent
and your onComplete
callback.
Much more Mooish :)
Use Element storage to dynamically retrieve your Tips
instance from your updated container. That is:
function initLiveContent()
{
var tips = new Tips('.liveReader');
// … your previous code …
$('liveContent').store('tip', tips);
}
function refreshPanel()
{
var destination = $('liveContent');
var myRequest = new Request.HTML({
update: destination,
// … your previous code …
onComplete: function() {
destination.retrieve('tip').attach('.liveReader');
}
});
myRequest.send();
}
:)