How to find a widgetVar?

Question

If i have a primefaces component, like

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

In the 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 notice the widget var name(if i dont provide it in the component, it will be generated). I want to know how can i get the widget var element, or if this is not possible, how can i get that "" tag so i can get the name of this widget var.

------ 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 body's onkeydown event. The goal of this is to replace the default behavior of the enter key by the tab key. The only problem of this is, when the focused component is a selectOneMenu and the user hits enter, it correctly behaves like the tab key, but the selectOneMenu previously focused is opened(because this is the default behavior of the component).

So, what i am trying to do, is to call the close() method of the selectOneMenu widget var of that previously focused component.

Solution 1

You can get the widgetVar object by id using this handy function:

Function

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

Usage

getWidgetVarById('myFormName:myComponent');

Example

getWidgetVarById('dialogId').show();

See More:

• Get widgetVar by Id
• Intro To PrimeFaces widgetVar

Solution 2

Since PrimeFaces 5.3 you can simply do:

PrimeFaces.getWidgetById(domElementId);

See https://github.com/primefaces/primefaces/blob/5_3/src/main/resources/META-INF/resources/primefaces/core/core.js#L22

Solution 3

The algorithm to generate the widget var is quite easy:

1. Take the element's id
2. Convert the colons : to underlines _
3. Append widget_ on start

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

The JSF id of the component is the same as the id attribute of corresponding html tag.

Solution 4

In PrimeFaces 6.1 you can figure out the widgetVar assigned by the following rule. It's similar to the examples shown above, but in later versions of PrimeFaces they appear to be including the form id.

For example:

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

Note: In my case, the ids have dashes. Dashes are converted to underscores. As shown above, it's probably the same conversion of colons too.

For example, you have:

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

The widgetVar would be:

"widget_my_page_form_the_checkboxes"

View your page source to verify it.

Now get the object and give it a click like so...

P('widget_my_page_form_the_checkbox').click();

View more solutions