how does mouse event work in primefaces?

Question

i am developing a java web application using primefaces 4.0 and jsf 2.0. i have a text label and it's textbox. when user is in edit mode, and want to modify the value of a particular textbox, the old value of the textbox should be displayed on the right side while the user is entering the new value in the textbox. so i add an output text which rendered false on load. i want to trigger this output text(id="test") when the user click in the textbox(id="customer_customername"). so rendered should be change to equal. anyone can tell me how to do this? in my backend i have an interface with its implementation , dao and service.

<h:panelGrid id="detail1" columns="2" styleClass="grid" columnClasses="label,value">

     <h:outputText value="#{customermsgs['customer.customername.title']}:" />

     <h:inputText id="customer_customername" value="#   {CustomerComponent.customer.customername}" onclick="#{CustomerComponent.customername}" label="customer_customername">
          <f:ajax render="detail1" />
     </h:inputText>

     <h:outputText id="test" value="#{CustomerComponent.customer.customername}"    rendered="#{CustomerComponent.visible}"/>
</h:panelGrid>

public class CustomerComponentImpl implements CustomerComponent {

/**
 * Data type variable that provides CRUD operations for Customer entities
 * 
 */


private boolean visible=false;

private String customername;


    public String getCustomername() {
    return customername;
}

public void setCustomername(String customername) {
    setVisible(true);
    this.customername = customername;
}

public boolean isVisible() {
    return visible;
}

public void setVisible(boolean visible) {
    this.visible = visible;
}

    //some codes goes here.

Note: i have implemented the method in my interface also.

the onclick event is not working. look like it does not trigger! anyone can help?

BalusC BalusC · Accepted Answer · 2013-12-02T11:25:40

This,

<h:inputText ... onclick="#{CustomerComponent.customername}">

does very definitely not what you thought it does. In its current form, when filled, it would only cause a JavaScript error because the #{CustomerComponent.customername} does very likely not return a piece of (syntactically valid!) JavaScript code which should be executed on click. Instead, it's more likely to return a string representing the customer name. When printed this into JavaScript context, it would only be interpreted as an undefined JavaScript variable.

As to your concrete functional requirement, the <f:ajax> listens inside input components by default only on change event. You can change this to click by setting the event attribute accordingly. All in all, this should do as you intented:

<h:inputText id="customer_customername" value="#{CustomerComponent.customer.customername}" label="customer_customername">
    <f:ajax event="click" render="detail1" />
</h:inputText>

how does mouse event work in primefaces?

1 Answers