CODEWITHSUNDEEP
jsfbuttonprimefacesnew-window
Raphael Roth
Raphael Roth

Reputation: 27373

Make possible to open p:button in new window by Ctrl+click or Middleclick like links

I have a primefaces (5.1) datatable with some buttons in the rightermost column:

            <p:column headerText="Actions" style="width: 60px">
                <p:button id="uploadButton" title="upload files"
                    icon="fa fa-edit" outcome="uploadFilesToVersion">
                    <f:param name="versionId" value="#{version.id}" />
                </p:button>

            <!-- other buttons come here-->

            </p:column>

note that "version" is the local (loop) variable of the sourrounding p:dataTable and uploadFilesToVersion.xhtml is a view for the user to upload files to a "version" with id = version.id)

Note that the button doeas not invoke any bean method, I just used the p:button element becaus of its style. Now I want to give the user the possibility to open the outcome of the button (i.e. an URL) in a new brower tab/window. This would be beneficial because I want the dataTable's filter state to be preserved in the meanwhile (its lost when the user clicks "back" in the browser).

How can that be achieved?

EDIT: Of course one could use some CSS to mimick the appearance of a button, but I wanted to avoid that:

            <p:column headerText="Actions" style="width: 60px">

              <p:link id="uploadButton" title="upload files"
                outcome="uploadFilesToVersion"
                styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
                 <span class="ui-button-icon-left ui-icon ui-c fa fa-edit"></span>              
                 <span class="ui-button-text ui-c">ui-button</span>
                 <f:param name="versionId" value="#{version.id}" />
            </p:link>

        <!-- other buttons come here-->

        </p:column>

Upvotes: 1

Views: 691

Answers (1)

BalusC
BalusC

Reputation: 1108642

That's not possible as the <p:button> navigates using JavaScript and not using <a href>. The behavior you're looking for is only possible using <a href>.

Your best bet is to use a <h|p:link>, which generates an <a>, and style it to look like a button.

<h:link ... styleClass="ui-button ui-state-default ui-corner-all">
    <i class="fa fa-edit" />
</h:link>

Wrap if necessary in a tagfile to reduce boilerplate.

<my:linkButton ... icon="fa fa-edit" />

Upvotes: 3

Related Questions