CODEWITHSUNDEEP
jsfjsf-2primefacesfocus
Shibas
Shibas

Reputation: 3

Set Focus for Primefaces Component in Bean with WidgetVar with RequestContex Execute

Is there a way to set my component focus after an function call to an other component with Primefaces RequestContex?

i tried:

RequestContex.getCurrentInstance().execute("PF('WidgetVar').focus();");

and

RequestContex.getCurrentInstance().execute("(((InputText) event.getComponent()).getWidgetVar()).focus();");

I dont get an error but nothing happens.

Did i miss something or is this not possible?

I use Primefaces 4.0.3 and MyFaces 2.0.2

EDIT Example Code

Bean

import java.io.Serializable;
import java.util.logging.Logger;

import javax.annotation.PostConstruct;

import org.primefaces.context.RequestContext;

public class NavigationBean implements Serializable {

    private static final long serialVersionUID = 1L;
    private String input;

    public NavigationBean() {}

    @PostConstruct
    public void init() {

    }

    public void goNext() {
        Logger.getAnonymousLogger().warning("GONEXT");
        RequestContext.getCurrentInstance().scrollTo("w3");

    }

    public String getInput() {
        return input;
    }

    public void setInput(String input) {
        this.input = input;
    }

}

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>


</h:head>

<h:body >

<h:form id="form">
<h:inputText id="input1" value="#{navigationBean.input}" widgetVar="w1"></h:inputText>
<h:inputText id="input2" value="#{navigationBean.input}" widgetVar="w2"></h:inputText>
<h:inputText id="input3" value="#{navigationBean.input}" widgetVar="w3"></h:inputText>
<h:inputText id="input4" value="#{navigationBean.input}" widgetVar="w4"></h:inputText>
    <p:commandButton value="focus" action="#{navigationBean.goNext()}" />

</h:form>


</h:body>

</html>

Upvotes: 0

Views: 26835

Answers (4)

J. Van
J. Van

Reputation: 190

Using PrimeFaces 6.1, for reasons unknown, I was unable to get the primefaces p:focus to work. So, I just implemented an onload JQuery function to set focus to a p:commandButton. For the onload call, put the jQuery nested function below in the 'body'. This is to be sure to override any other primefaces onload functions.

<script>
     jQuery(document).ready(function () {
          jQuery(document).ready(function () {
              // twice in document.ready to 
              // execute after Primefaces callbacks
              PF('widget_home_page_form_command_button').getJQ().focus();
          });
     });
</script>

PrimeFaces creates widgetVar components for all of the primefaces components. Some features are available though the widgetVar such as disable or enable. But, I had to use the getJQ() function to obtain the jQuery object and used that object to set focus on the command button.

Upvotes: 3

Rick
Rick

Reputation: 31

If the previous answer does not work, you can create a js function, for example:

function focusField(id){
 $(id).focus();
}

Then in your bean, assuming u want set focus on field "input4" , it represents ID not Widgetvar

RequestContext.getCurrentInstance().execute("focusField('#input4');");

Upvotes: 3

Trilok Chand Bhardwaj
Trilok Chand Bhardwaj

Reputation: 86

You can use <p:focus> tag from primefaces, I used it for setting focus at run time as follows :

.xhtml code:

<p:focus id="focusID" for="#{yourBean.focusProperty}" />

.java code:

focusProperty="componentIDToSetFocus";

don't forget to update the ID of <p:focus> tag

Upvotes: 4

kolossus
kolossus

Reputation: 20691

Looks like you're under a couple of misconceptions here:

  1. That you can execute Java code in RequestContext API.

    RequestContext.getCurrentInstance().execute("(((InputText) event.getComponent()).getWidgetVar()).Focus();");

    You can't. The code above will not work. execute is built for JavaScript only.

  2. The function name you're looking for is focus(). JS is case-sensitive. So Focus <> focus. So I think what you should have there is

    RequestContext.getCurrentInstance().execute("yourClientSideId.focus();");

    Where yourClientSideIdshould correspond to the widgetVar attribute of the component you're interested in. I'm not sure what the PF object you're referencing in your code is supposed to be. I've never seen it. Perhaps you meant the PrimeFaces object?

In the event of failure of the above, you could always use the scrollTo method on RequestContext:

RequestContext.getCurrentInstance().scrollTo("yourComponentWidgetVar");

Upvotes: 0

Related Questions