How to find a Var widget?

Question

If I have a component, a surface, for example

<p:selectOneMenu id="myComponent"> ... </p:selectOneMenu> 

In html, it will generate something like this:

 <div id="myFormName:myComponent" widgetVar="lollipop"> ...A lot of things in here... </div> <script id="myFormName:myComponent_s"> $(function(){PrimeFaces.cw('SelectOneMenu','lollipop',....... </script> 

Inside the script tag, you can see the name of the var widget (if I did not provide it in the component, it will be generated). I want to know how I can get the var widget element, or if this is not possible, how can I get this tag so that I can get the name of this var widget.

------ EDIT ------ I will try to explain why I need this. I have this function:

 function simulaTabManoBrow(event){ var focusedComponent=document.activeElement; if(event.keyCode==13){ //Cancel th edefault enter event(submit the form) event.preventDefault(); event.stopPropagation(); event.returnValue = false; event.cancelBubble = true; if((focusedComponent.tagName.toLowerCase()=="input" && focusedComponent.type.toLowerCase()=="button") || focusedComponent.tagName.toLowerCase()=="button"){ //If the focused component is a button, click the button. focusedComponent.click(); }else{ //Press the tab key programatically $.emulateTab(); verifyOneMenu(campoFocado); } } } 

This function is executed on the onkeydown event body. The purpose of this is to replace the behavior of the enter key with the default key. The only problem is that when the focused component is selectOneMenu and the user enters it, it behaves correctly like a tab key, but the previously focused selectOneMenu opens (since this is the default behavior for the component).

So what I'm trying to do is call the close () method of the selectOneMenu var widget of this previously focused component.

Answer 1

You can get widgetVar object by id using this convenient function:

Function

 function getWidgetVarById(id) { for (var propertyName in PrimeFaces.widgets) { if (PrimeFaces.widgets[propertyName].id === id) { return PrimeFaces.widgets[propertyName]; } } } 

Using

 getWidgetVarById('myFormName:myComponent'); 

Example

 getWidgetVarById('dialogId').show(); 

More details:

• Get widgetVar by id
• Intro To PrimeFaces widgetVar

Answer 2

The var widget generation algorithm is pretty simple:

• Take the item id
• Convert colons : to underscore _
• Add widget_ at startup

So, for example, if your element identifier is main:personal:age , the widget will be widget_main_personal_age .

The JSF identifier of the component matches the id attribute of the corresponding html tag.

Answer 3

In PrimeFaces 6.1, you can define the widgetVar assigned by the following rule. This is similar to the examples shown above, but in later versions of PrimeFaces they seem to contain the form identifier.

For instance:

 "widget_" + <form id> + "_form_" + <selectBooleanCheckbox id> 

Note. In my case, identifiers have a dash. Dashes are converted to underscores. As shown above, this is probably the same colon conversion.

For example, you have:

 <h:form id='my-page'> and <p:selectBooleanCheckbox id='the-checkboxes'> 

The widget Var will be:

 "widget_my_page_form_the_checkboxes" 

Browse the page source to check it.

Now we get the object and give it a click, like this ...

 P('widget_my_page_form_the_checkbox').click();