CODEWITHSUNDEEP
jsfprimefaces
Maxes
Maxes

Reputation: 23

Command link with "copy to clipboard" function jsf primefaces

So as in the picture i have a share, save and apply button. image

i've read some articles about the copy to clipboard but it seems only works with a button (?), As what i used is a command link ,since i wanted a transparent button so i used a command link instead of command button(i read this from another articles).

This is my xhtml file

<h:commandLink id="share">
<i class="fa fa-share-alt" style="color: black"/>
<h:outputText value="&#160;Share" escape="false" style="color: black;"/>
</h:commandLink>
<pe:clipboard id="clipboardbtn" trigger="share" action="copy" text="http://localhost:8082/index.xhtml">
<p:ajax event="success" listener="#{clipboardController.successListener}" />
<p:ajax event="error" listener="#{clipboardController.errorListener}" />
</pe:clipboard>

This is my controller

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);
    }

I'm really stuck in here and the references for this isn't that much :( I've been searching everywhere but only found about that commandbutton references not commandlink, but i needed to use a commandlink since i wanted the UI like in the image i've attahced above.

Upvotes: 2

Views: 2928

Answers (1)

Brooksie
Brooksie

Reputation: 371

Just replacing h:commandLink with p:commandLink should solve your problem.

You may also want to add some update="@form" clauses so that you can see the messages.

    <h:form>
        <p:growl globalOnly="false" showDetail="true" />
        <p:commandLink id="btnAjaxCopy" onclick="return false;" >
            <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="btnAjaxCopy" action="copy" text="PrimeFaces Clipboard Rocks Ajax!">
            <p:ajax event="success" listener="#{clipboardController.successListener}" update="@form"/>
            <p:ajax event="error" listener="#{clipboardController.errorListener}" update="@form"/>
        </pe:clipboard>
    </h:form>

Upvotes: 1

Related Questions