CODEWITHSUNDEEP
javascriptjsf-2primefaces
Mateus Viccari
Mateus Viccari

Reputation: 7709

How to find a widgetVar?

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.

Upvotes: 6

Views: 19003

Answers (4)

Jasper de Vries
Jasper de Vries

Reputation: 20253

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

Upvotes: 2

J. Van
J. Van

Reputation: 190

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

Upvotes: 1

Hatem Alimam
Hatem Alimam

Reputation: 10048

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:

Upvotes: 9

Cjxcz Odjcayrwl
Cjxcz Odjcayrwl

Reputation: 22867

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.

Upvotes: 1

Related Questions