<rich:popupPanel> does not close on escape key press

[teenastanley]

Hello there,

I guess I am posting in the right forum.

I'm using Richfaces 4.0.0.Final. I have to close the <rich:popupPanel> on press of Esc button. I have tried the jQuery hotkey plug in, however that didn't close the popup. Here is how I tried it:

$(document).bind('keydown', 'Esc', function(){

            $("#mypopupPanel").fadeOut();

        });

I know about the <rich:hotKey>, but unfortunately that is not released part of Richfaces 4.0.0.Final.

I'm wondering why the <rich:popupPanel> does not contain any of the 'onkey*' functions associated with it. The only functions it supports are 'onmask* '. I am able to close the popup onclick, onmaskclick etc.

If anybody has a work around for this (other than upgrading Richfaces), please let me know.

Another question: Is it mandatory to wrap the <rich:popupPanel> with <a4j:form> ( In the jboss.org tutorial, I see the popup is always wrapped.)

http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Panels.html#sect-Component_Reference-Panels-richpopupPanel

Thank you,

Teena

[michpetrov]

Hi,

this should work:

$(document).bind('keydown', 'Esc', function() {
        #{rich:component('mypopupPanel')}.hide();
});

yours didn't work because $("#mypopupPanel") doesn't find the popup. The id you set for the richfaces component isn't what the actual id will look like in the end (e.g. in case of the popup the topmost div will have id="mypopupPanel_container"). But the rich:component('id') function can find the components based on the original id.

As to the a4j:form, the popupPanel has to be inside one (as do almost all components) but if you already have one on the page you don't need to make another just for the panel. (I'm not sure it would even let you do it, it shouldn't allow nested forms).

[teenastanley]

Hi Michal,

Thank you. That worked perfectly. Could you please tell me what syntax is that?

#{rich:component('mypopupPanel')}.hide();

To me it doesnt look like a jQuery/javascript syntax. I thought this is  JSF EL syntax and this should not be used in the scripts.

Thanks,

Teena

[michpetrov]

Teena Stanley wrote:

Hi Michal,

Thank you. That worked perfectly. Could you please tell me what syntax is that?

#{rich:component('mypopupPanel')}.hide();

To me it doesnt look like a jQuery/javascript syntax. I thought this is  JSF EL syntax and this should not be used in the scripts.

Thanks,

Teena

Hi,

it's EL mixed with JavaScript and it's ok to use it in scripts: the EL part will resolve to a string and JavaScript will take it from there. You'd have a hard time trying to get by without it.

[teenastanley]

Hi Michal,

Thank you. This is really really helpful.

Cheeers,

Teena