Question

I am using Primefaces 3.2 with jsf 2 and glassfish 3.1.2.

I have a p:dataTable of users containing avatars of the user. Whenever the user moves the mouse over the avatar a p:overlayPanel appears with more information (lazy loaded) on the user, and disappears when the user moves the cursor away – like this:

<p:overlayPanel for="avatar" dynamic="true" showEvent="mouseover" hideEvent="mouseout" ...>

This works very well – as long as the user is “slowhanded”. Whenever an user moves the cursor fast above many avatars many of the overlayPanels stay visible.
For example when the user has the cursor over the position where user avatars are displayed and uses the scroll wheel of his mouse to scroll the usertable down or up.

I believe that the overlaypanel starts to load the information dynamically (dynamic="true") from the server when showEvent="mouseover" is dispatched and displays the overlaypanel after the response from the server arrives.
This way it is not possible to detect whether the cursor is already away when the overlaypanel becomes visible – so the hideEvent="mouseout" is never dispatched.

Is there a way to make the primefaces overlaypanel appear directly on mousover, showing a loading gif and update the content into the overlaypanel when the response comes from the server.

Is this a good appraoch or does anyone know any other way to solve this nasty problem?

Thanks Pete

Answer 1

As my first answer is already very long and contains valid information, I decided to open a new answer presenting my final approach.

Im now using Primefaces inheritance pattern making the code alot cleaner. Also I noticed that replacing/overwriting the whole bindEvents function isnt necessary, as we can remove the old event handlers. Finally this code fixs the latest issue experienced: A hide event before ajax arrival.

PrimeFaces.widget.OverlayPanel = PrimeFaces.widget.OverlayPanel
        .extend({

            bindEvents : function() {
                this._super();

                var showEvent = this.cfg.showEvent + '.ui-overlay', hideEvent = this.cfg.hideEvent
                        + '.ui-overlay';

                $(document).off(showEvent + ' ' + hideEvent, this.targetId).on(
                        showEvent, this.targetId, this, function(e) {
                            var _self = e.data;

                            clearTimeout(_self.timer);
                            _self.timer = setTimeout(function() {
                                _self.hidden = false;
                                _self.show();
                            }, 300);
                        }).on(hideEvent, this.targetId, this, function(e) {
                    var _self = e.data;

                    clearTimeout(_self.timer);
                    _self.hidden = true;
                    _self.hide();

                });
            },

            _show : function() {
                if (!this.cfg.dynamic || !this.hidden) {
                    this._super();
                }
            }

        });

Im sorry for the poor formatting: Eclipses fault 😉