How to get the Active Focused Primeface component

Hi,

In one of my screen i am having the following Prime faces controls.

1. Data Table - (Stock List)
2. Pane Grid - (Stock Information)
3. Data Table - (Customer wise Stock List)
4. Panel - (Displaying the Customer Detail)

I am navigate to any of the above mentioned controls and i want to know which is my active focused control?

How to get the Component which is Focused ?

we are tried with <p:focus> and from the focus context we can come to know which is my currently focused control.
This can be used in Button Click / Panel Grid Clicked event.

But for Data table and Panel this functionality is not working because there is no clicked event or this is the component which is focused.
so we cant able to get the focused component in Prime face.

Please suggest how to get the Focused component in my screen for Data Table and Panel Control ....

In Data table on Row Selection we can able to get the Focused component but if there is no data then the focus is not setting in my Data table.

Please provide your feedback and also we kindly suggest if we have Set Focus and Get Focus kind of method to get the focused component it will resolve most of the requirements of ERP/ Any web application development.

Thanks in advance,
Prakash.Ys

Primefaces 3.3
JSF 2.2 Mojjara
Tomcat 7
JDK 1.7

Don't forget that there is ALWAYS plain dom/javascript/html/css that might help...

http://www.google.nl/search?q=javascrip ... =firefox-a

Hi Mr.kukeltje,

Thanks for your feedback.

Currently we are looking the DOM to get the focused control.
But we need to do more coding and conversion to make sure the focused item is Data Table / Panel Grid.

But We are looking a best solution from Prime faces to get the focused component.

[optimus.prime]

PFS could help, jQuery selector api has :focus selector. You should be able to figure out the element that has focus on runtime.

http://api.jquery.com/focus-selector/

http://blog.primefaces.org/?p=1867

Hi Optimus,

Thank you for your valuable feedback.

We tried with the Focus Selector thru the jQuery functionality and we are facing the below issue.

Please look and i think we are facing issue with
<script src="http://code.jquery.com/jquery-latest.js"></script> when we include this tag in my page, the primefaces.js and jquery-latest.js having issue and we are facing the below error.

1. We have a Data Table component in one of my screen when the page gets opened we are getting the below error and the Java script selector code is not executing.

Code: Select all

$(this.jqId + " thead th").draggable is not a function
[Break On This Error]    

...[a];if(c){var b={params:[{name:this.id+"_instantSelectedRowKey",value:d}]};c.cal...

primef...mefaces (line 11)

2. We have a calendar component in one of my screen when the page gets opened we are getting the below error and the Java script selector code is not executing.

Code: Select all

this.jqEl.datepicker is not a function
[Break On This Error]    

...skinButton(d)}if(this.cfg.popup){var c="resize."+this.id;$(window).unbind(c).bin...

primef...mefaces (line 6

Pf already includes jquery, do not inde it yourself again.

Hi Mr.kukeltje,

Yes thanks and we tried with removing the jQuery script tag and executed the page with only the below script.

Code: Select all

<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});
</script>


The function is not at all calling in my page.

I think you will find that unless you actively select a row in a datatable that it cannot currently have focus: focus is normally the point on the page (normally input component) where the next action (mouse or keyboard) will cause an event of some kind.
The problem with datatable being focussed is that it, itself, cannot be the current focus target only subcomponents can be (any input or selectable part).
The same goes for panelgrid too.
Now the question here is: why do you need to do this?

Hi Andyba,

Thanks for the feedbacks,

Now the question here is: why do you need to do this?

Actually we are having a menu item like ADD, DELETE, SAVE etc in my application. This menu is common to all my screen.
In my screen i have 2 Data table and 1 Panel Grid.

When i Click ADD Menu then it has to know which Data Table has to insert a new row.
To identify the active control only we need this.

For Panel Grid - Thru On Click event we achieved the activeControl id in backing bean and we come to know the current focused item is Panel Grid.

For Data Table - There is no on click event. So we cant able to get the focused component id. But if there is a row in my data table then i can able to get the ID.

Consider the following scenario - I have a 2 Data table and presently there is no rows. I want to insert a row thru ADD menu but i cant get focus in any of the Data Table component due to no rows found.

Current Implementation Approach Taken:
Now we are using a data table and panel grid inside of a div and In DIV we are calling a Java script method on ONCLICK and ONFOCUS event to update the id in my Backing Bean. By using this we are taking a decision whether the selected DIV is a Data Table / Panel Grid.

But it looks hard and we are expecting some Better Improvement like the focused control is any of the Below Prime Faces Panel means it will helpful.
Dashboard, Fieldset, Layout, NotificationBar, OutputPanel,Panel, PanelGrid, ScrollPanel, TabView,Toolbar, Wizard.

For the above component if there is a method like GetFocus(), SetFocus() or if we are focus in any input component means when we call GetParentFocus(), SetParentFocus() kind of method it should return the focused parent control.

Thanks

While the idea (one menu system doing everything) sounds good there are obvious problems with it as you can see.

You are trying to solve a problem which is not reliably solvable here: in order for a component to have focus in the browser it has to be either an input element or a label for an input element which the DataTable itself is not, only labels+input elements contained within the datatable are.

You would be better off using context menus in places where your general menu system cannot cope OR provide a button bar obviously placed for components which do not lend themselves to this menu system of yours.