Target specific tabs of a p:tabView in p:printer - jsf-2

I am trying to print multiple tabs but want to exclude some.
I tried the following:
<p:printer target="tabs:tab0,tabs:tab2" />
and
<p:printer target="tabs:tab0" />
<p:printer target="tabs:tab2" />
Neither worked.

I played somewhat around it and it works only for a specific tab if the tab is visible. You can thus definitely not specify multiple tabs. You might want to post an issue report about that to PrimeFaces, although solving that would be relatively hard.
As of now, to get it to work for a specific tab, you'd need to toggle the desired tab visible in the button's onclick handler before print action is performed. You can use the select() function of the <p:tabView> widget for this wherein you pass the zero-based tab index.
Here's a kickoff example.
<h:form id="form">
<p:tabView id="tabs" widgetVar="tabs">
<p:tab id="tab1" title="tab1">tab1</p:tab>
<p:tab id="tab2" title="tab2">tab2</p:tab>
<p:tab id="tab3" title="tab3">tab3</p:tab>
</p:tabView>
<p:commandButton type="button" icon="ui-icon-print" value="Print tab2" onclick="tabs.select(1)">
<p:printer target="tabs:tab2" />
</p:commandButton>
</h:form>

Related

Primefaces dataTable with select and dragable rows, select fails when rows are reordered

I have a primefaces dataTable which is both select-able (single selection) and has draggable rows. I also need to select a row via a button (apart from being able to select the row itself). My view code is:
<p:dataTable id="itemTable" widgetVar="itemTable"
var="item" draggableRows="true"
value="#{routesModelBean.itemList}" selectionMode="single"
selection="#{routesModelBean.selectedItem}"
rowKey="#{item.id}" rowIndexVar="rowId">
<p:column style="width:32px;text-align: center">
<p:commandButton icon="ui-icon-search"
onclick="PF('itemTable').unselectAllRows();PF('itemTable').selectRow(#{rowId},false);" type="button">
</p:commandButton>
</p:column>
The problem seems to be the "rowIndexVar". For example, if i have two items in my list and i swap them by dragging, then clicking the button of one item will result in selecting the other.
Edit: Primefaces version is 6.0
When reordering the rows you should update the table too. Use the following
<p:ajax event="rowReorder" listener="YOUR_LISTENER" update=":itemTable" />

Primefaces TabView throwing a null-pointer on third load of tab

I have a tab view with three tabs. The tab view seems to work correctly in the first two tab changes, but on the third I get a null-pointer as in
java.lang.NullPointerException
at org.primefaces.component.tabview.TabViewRenderer.encodeEnd(TabViewRenderer.java:59)
Also, TabChangeEvents have null data at this point.
Making the contents of the tabs minimal (just a line of text), I can see that the contents of the tabs are being appended onto each other. Once this happens, the issues begin.
Looking at the PrimeFaces source code, it seems that it's when trying to work with the tabToLoad variable that is retrieved with the generated tabClientId. I'm not certain that it should be in the branch of logic that deals with new tabs either.
My tab view looks as follows:
<p:tabView styleClass="entities-tabview" id="tabs" dynamic="true">
<p:ajax event="tabChange" listener="#{action.onTabChange}"
update="first-tab,second-tab"/>
<p:tab title="First Tab" id="first-tab">
tab one content
</p:tab>
<p:tab title="Second Tab" id="second-tab">
tab two content
</p:tab>
<p:tab title="Other Tab" id="other-tab">
// tab content
</p:tab>
</p:tabView>
It seems that the code checks if the var parameter is set on the TabView. As we do not use one, it is null, so it goes into the new tab branch. The tab index is set on the tabview though. Any ideas about what could be wrong?
After some more investigation, I see that on a tab change the tab that should be changed to is specified via the request parameter with the client ID with _newTab appended to it. The first two times this is set correctly, but on changing back to the tab it is not set, hence not being able to find the tab and the subsequent NPEs.
Updated Cause
With the tabs being dynamic, and the ajax event firing, the tabs are changed and subsequently the ajax updates the tabs. This seems to cause the issue where both tabs are loaded into the same tab, which most likely is messing up the parameters later on.
But how to be able to do the tab change functions and have its details display in the tab?
The issue here is that you have the ajax updating both of the tabs.
It seems that when it does this, the state of the tabs gets confused and you end up with the content of both tabs in one.
You can get around it by inserting the content into an h:panelGroup and updating the panelgroup instead of the tab
example below
<p:tabView styleClass="entities-tabview" id="tabs" dynamic="true">
<p:ajax event="tabChange" listener="#{action.onTabChange}"
update="one-content,two-content,other-content"/>
<p:tab title="First Tab" id="first-tab">
<h:panelGroup display="block" id="one-content">
tab one content
</h:panelGroup>
</p:tab>
<p:tab title="Second Tab" id="second-tab">
<h:panelGroup display="block" id="two-content">
tab two content
</h:panelGroup>
</p:tab>
<p:tab title="Other Tab" id="other-tab">
<h:panelGroup display="block" id="other-content">
// tab content
</h:panelGroup>
</p:tab>
</p:tabView>

popup in JSF to set it value in parent Window

I have written a button onClick to open popup window. The window has a table with a commandLink in each row. How to populate the parent page textbox on click of commandLink in child page?
You can give the commandLink an ajax tag, with whom you render your parent textbox.
Use something like this:
<h:inputText id="parentTextboxId" value="#{bean.text}" />
<rich:popupPanel domElementAttachment="form" show="#{bean.showPopup}" modal="true">
<h:commandLink value="My Link">
<f:ajax render=":mainForm:parentTextboxId" listener="#{bean.changeText}" />
</h:commandLink>
</rich:popupPanel>
In the bean method bean#changeText the value of the textbox will be changed, but you can also do it elsewhere, like in the action method of your commandLink

a4j: ajax event="change" doesn't work on the first click, but on the second click

I have a form using JSF with rich faces. In the form there are two radio buttons: "Yes" and "No". The default selection is "Yes". When clicked "No" a text area should appear below. But it doesn't. Instead It appears in the second click; I first click "No" (Default was "Yes") nothing happens and then I click "Yes", now it works, the text area below appears but it automatically chooses "No".
Here is the code:
<h:outputLabel for="cheapest">Cheapest Flight?</h:outputLabel>
<h:selectOneRadio id="cheapest" value="#{myController.selectedItem.cheapest}" disabled="#{myController.showMode}">
<f:selectItems value="#{yesNoTypeItems.items}" />
<a4j:ajax event="change" render="#form" execute="#form" />
</h:selectOneRadio>
<h:outputLabel for="newArea" rendered="#{myController.selectedItem.cheapest == false}">New Text Area</h:outputLabel>
<h:inputTextarea id="newArea" rendered="#{myController.selectedItem.cheapest == false}" disabled="#{myController.showMode}"
value="#{myController.selectedItem.newArea}" style="width:300px;height:100px;">
</h:inputTextarea>
onchange - Javascript code executed when this element loses focus and its value has been modified since gaining focus. (docs)
Perhaps unfortunately named the change event doesn't fire when you expect it to. Use the click event and check if the value is actually being changed if you need to.

p:tabView tabIndex access

I have a code like below.
<p:tabView value="#{bean.entityList}" id="tabView" var="item">
<p:tab title="#{item.name}">
.
.
.
</p:tab>
</p:tabView>
I want to access the index of the tab just like datatable's rowIndexVar. How can I get the tab index?
There is a very horrible workaround for this, which I don't recommend but it's the best I could come up with. It involves having a bit of Javascript to keep track of the tab count, and within each tab using more Javascript to generate the HTML that needs the tab index.
In the <head>of your page, initialise the tab counter;
<head>
<script>
// Global tab counter
tabCount = -1;
</script>
</head>
Then when you draw each tab, increment the counter. Within the tab, whenever you need the tab index, make a small script to generate the HTML with the index. For example:
<p:tabView value="#{bean.entityList}" id="tabView" var="item">
<p:tab title="#{item.name}">
<script>
// Increment the tab counter
tabCount++;
</script>
<!-- Now the tab content -->
The index of this tab is:
<script>
document.write(tabCount);
</script>
</p:tab>
</p:tabView>
As I said, it's horrible and makes me wince whenever I see it, but it works.

Resources