Issue with displaying mootools tooltips on Request.HTML content

Question

Issue with displaying mootools tooltips on Request.HTML content

I am encountering an issue with incorporating tips into a Request.HTML function. I have a div that updates its content every 30 seconds. The returned content consists of multiple divs with the class ".liveReader".

Below is the JavaScript code used to initialize 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();
            }

The corresponding HTML structure is as follows:

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

However, I am only able to see the default tooltip title! Any suggestions on how to resolve this issue?

javascript css mootools mootools-events mootools-more

Answer 1

Answer №1

Your issue lies within variable scoping.

The onComplete handler is referencing the variable tips, which is local to the initLiveContent function. As a result, the onComplete call is failing.

For starters, it's essential to use a debugger and set it to break on all exceptions. Without this, errors like "undefined variable tips" thrown from within a callback may not show up in the standard console.

To resolve this, there are two approaches:

Make tips a shared variable. One way is to declare it in a function that is passed as the second argument to your window.addEvent call, allowing you to reference it in both initLiveContent and the onComplete callback.

A more Mooish approach :) Utilize Element storage to dynamically retrieve your Tips instance from your updated container. Here's how:

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

:)

Answer 2

Your issue lies within variable scoping.

The onComplete handler is referencing the variable tips, which is local to the initLiveContent function. As a result, the onComplete call is failing.

For starters, it's essential to use a debugger and set it to break on all exceptions. Without this, errors like "undefined variable tips" thrown from within a callback may not show up in the standard console.

To resolve this, there are two approaches:

Make tips a shared variable. One way is to declare it in a function that is passed as the second argument to your window.addEvent call, allowing you to reference it in both initLiveContent and the onComplete callback.

A more Mooish approach :) Utilize Element storage to dynamically retrieve your Tips instance from your updated container. Here's how:

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

:)

Issue with displaying mootools tooltips on Request.HTML content

Answer №1

Similar questions

How can a JavaScript function communicate with a code behind method?

Move the div in an animated way from the bottom of the screen to the right

Locate the closest point among a set of coordinates to a specified point

Using the datetime picker format will automatically add 5 years to the selected date

Determining whether a mouse click occurred in the left or right side of a DIV element

Identify and troubleshoot scripts that are included in the response returned by Chrome

What is the best way to bring in an image when the resolution falls below 700 pixels?

Utilizing setInterval for automatic page refreshing

What is the best way to transfer a file from Postman to a Node.js server using Multer?

What is the best way to include a new class into the current class in this particular scenario?

Possible Rewrite: "Is it possible to dynamically adjust the `<p>` value when modifying the range meter in JavaScript?"

What is the process for uploading a file selected with the Dojo Uploader to a servlet using Dojo version 1.7.5?

Exploring the capabilities of JQuery's attributes

Avoid triggering the resizecolumn event in ExtJS while the columns are still loading

Find the vertices located on the "upper surfaces" of the ring using Three.js

Customizing the placeholder font size in Material UI Autocomplete using ReactJS

An issue has been identified where the checked selection feature is not functioning correctly for CSS selections

The NextJs error message states: "`nextCallback` is not defined as a function

Passing an array to a view is not possible when working with asynchronous methods

Is there a way to assign a variable as the value for the jQuery .attr method?