growl message already showing even before action

Question

Hello I'm trying to make a copy to clipboard button , yes the button works. Only it's really weird, when i open the page, the message growl already popped up. Instead, i wanted it only popped up when my commandlink is "clicked". Anyway i'd like to show you my Bean and index to get better idea where i did wrong...

public void successListener(final ClipboardSuccessEvent successEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Success",
                "Component id: " + successEvent.getComponent().getId() + " Action: " + successEvent.getAction()
                + " Text: " + successEvent.getText());
        FacesContext.getCurrentInstance().addMessage(null, msg);
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage("Link Halaman", "Berhasil Di Copy"));
    }
    
    public String messageGrowl(){

        FacesContext context = FacesContext.getCurrentInstance();

        context.addMessage(null, new FacesMessage("Link Copied Successfully"  + ""));
        return null;

    }

    public void errorListener(final ClipboardErrorEvent errorEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error",
                "Component id: " + errorEvent.getComponent().getId() + " Action: " + errorEvent.getAction());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

This is my index.html :

<p:commandLink id="share" onclick="#{homeMBean.messageGrowl()}">
                                            <i class="fa fa-share-alt" style="color: black"/>
                                            <h:outputText value="&#160;Share" escape="false" style="color: black;"/>
                                        </p:commandLink>
                                        <pe:clipboard id="clipAjax" trigger="share" action="copy" text="http://localhost:8082/index.xhtml">
                                            <p:ajax event="success" listener="#{homeMBean.successListener}" update="@form"/>
                                            <p:ajax event="error" listener="#{homeMBean.errorListener}" update="@form"/>
                                        </pe:clipboard>
<p:growl id="growled" showDetail="true" sticky="true" /> 

it becoming like this,the growl message already popped up when i open the page.Maybe anyone has encountered same problems? or maybe anyone has any idea? Thankyou somuch :)

Answer 1

The expression #{homeMBean.messageGrowl()} in the onClick attribute is evaluated when the page is rendered and the result of the call to homeMBean.messageGrowl() is set as the value of the attribute. I guess your intention was not to call the method homeMBean.messageGrowl() when the page is rendered, but when the onclick event occurs. You should use the action attribute instead of onclick.

The attribute onclick is intended to specify some client side javascript code to be called.

The attribute action is intended to specify a method in the backend to be executed using an ajax call.