CODEWITHSUNDEEP
ajaxprimefacesjsf-2.2
Roland
Roland

Reputation: 351

Why does PrimeFaces 5.3 not call my listener function when I catch the "blur" and "focus" events?

My intention was to show information on filling a text area component. When it gets the focus I show the info, when it loses the focus I clear the info. I do not want to proccess any input value just catch the focus and blur events and call the listener and show/clear the message.

I have read BalusC's comment on conditional rendering so I put my conditional text message to an "always rendered" JSF component.

My "always rendered" f:outPutPanel component is shown in the generated XHTML code but my listener function is never called. As far as I know the method signature of primefaces listener is just void somefunction() not like in jsf ajax listener. I also read BalusC's comment about including @this for the proccess attribute but in my case it seems not to be reasonable as I do not want to catch any input values. I am newbie to JSF and primefaces so any help is appreciated.

My relevant view snippet:

<h:form>
    <h:panelGroup layout="block" id="info">
        <h:outputText rendered="#{ebookController.infoMessage != null}" value="#{ebookController.infoMessage}"/>
    </h:panelGroup>
    ....
    <p:inputTextarea id="description" styleClass="form-control vspace"  required="true" requiredMessage="Kérlek, add meg az e-könyv rövid leírását" value="#{ebookController.newEbook.description}" rows="20" cols="30" counter="display" maxlength="500" counterTemplate="{0} karakter lehet még" autoResize="false" validatorMessage="Az e-könyv leírása maximum 500 karakterből állhat">
       <f:validateLength maximum="500"/>
       <p:ajax event="focus" process="@none" update="info" listener="#{ebookController.setTextAreaInfoMessage()}"/>
       <p:ajax event="blur" process="@none"  update="info" listener="#{ebookController.clearInfoMessage()}"/>
    </p:inputTextarea>
    <h:outputText id="display" />
</h:form>

My relevant java code:

@Named(value = "ebookController")
@SessionScoped
public class EbookController implements Serializable {

private String infoMessage;

public String getInfoMessage() {
    return infoMessage;
}

public void setInfoMessage(String infoMessage) {
    this.infoMessage = infoMessage;
}

public void setTextAreaInfoMessage(){
    setInfoMessage("Tipp: Az e-könyved bemutatása során a fontos részeket emeld ki, és tagold a szöveget bekezdésekkel. Ha egy bekezdés végére értél, csak egy ENTER-t üss!");
}

public void clearInfoMessage(AjaxBehaviorEvent e){
        setInfoMessage("");
}
....
}

Upvotes: 0

Views: 462

Answers (1)

Ravi
Ravi

Reputation: 411

Solution 1 : User f:ajax

<f:ajax immediate="true" event="focus" process="@none" render="info"
                listener="#{ebookController.setTextAreaInfoMessage()}" />
<f:ajax immediate="true" event="blur" process="@none" render="info"
                listener="#{ebookController.clearInfoMessage()}" />

Managed Bean

public void setTextAreaInfoMessage() {
        System.out.println("setTextAreaInfoMessage");
        setInfoMessage(
                "Tipp: Az e-könyved bemutatása során a fontos részeket emeld ki, és tagold a szöveget bekezdésekkel. Ha egy bekezdés végére értél, csak egy ENTER-t üss!");
    }

    public void clearInfoMessage() {
        System.out.println("clearInfoMessage");
        setInfoMessage("");
    }

Reference Problem with h:form and p:ajax

Upvotes: 0

Related Questions