mootools tool tips not showing for Request.HTML content

Question

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?!!

Answer 1

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:

1. 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.

2. 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();
   }
   

:)