jsf/primefaces dataTable with links; wrong one opened/displayed - jsf

I have a primefaces dataTable with several URLs as data. There is one URL per line. A line has a button. If you click it, a dialog is opened, containing a iframe with the website of the corresponding URL.
This is the (shortened) xhtml:
<p:dataTable id="transResult" rendered="#{not empty urlList}"
var="aUrl"
value="#{urlList}">
<p:column ...></p:column>
...
<p:column>
<p:commandButton id="urlBtn" value="#{aUrl}"
onclick="PF('showURL').show();"/>
<p:dialog id="urlDialog" widgetVar="showURL">
<h:outputLabel value="URL: #{aUrl}"/>
<iframe src="#{aUrl}"/>
</p:dialog>
</p:column>
</p:dataTable>
The table with the buttons is displayed correctly:
|url1|
|url2|
...
If I have a look at the hidden dialogs with firebug, the URLs are put correctly! Also the id's are generated corrctly:
transResult:0:urlDialog
transResult:1:urlDialog
...
Problem:
But when I click on a button, always the dialog with the last URL is openend.
Any idea why this goes wrong?

I found a solution that seems to work. The base is to have different widgetVar.
<p:dataTable id="transResult" rendered="#{not empty urlList}"
var="data"
value="#{urlList}">
<p:column ...></p:column>
...
<p:column>
<p:commandButton id="urlBtn" value="#{aUrl}"
onclick="PF('showURL#{data.id}').show();"/>
<p:dialog id="urlDialog" widgetVar="showURL#{data.id}">
<h:outputLabel value="URL: #{data.aUrl}"/>
<iframe src="#{data.aUrl}"/>
</p:dialog>
</p:column>
</p:dataTable>
So we have an ID per row which is also added to the widgetVar to make them different.
Note that with this solution everything is calculated when the table is created. So there is nothing "dynamic". But for my needs this is no problem.

Related

How do I enable my button if any of some checkboxes are checked in jsf?

I have a primefaces datatable with a number of rows, known at runtime. Each row has a checkbox in the first column. The footer of the table contains a commandButton which I want to be disabled, if none of the checkboxes are selected. Otherwise it should be enabled.
The table looks roughly like this:
<p:dataTable id="table"
value="#{allgSucheController.pstListe}"
selection="#{allgSucheController.selectedPruefstelle}"
var="pst"
lazy="true">
<p:column id="checkboxes_header">
<f:facet id="container1">
<h:selectBooleanCheckbox id="chk_all">
</f:facet>
<h:selectBooleanCheckbox id="checkbox"
value="pst.selected">
</h:selectBooleanCheckbox>
</p:column>
<!-- snip -->
<f:facet name="footer">
<span id="c_dwl">
<h:commandButton id="btnDownload"
value="Download"
ajax="true"
disabled="???">
</h:commandButton>
</span>
</f:facet>
</p:dataTable>
I tried to set the value of the disabled attribute of the command button to pst.selected, but it didn't work. The command button was disabled, but did not get enabled if I checked any checkboxes.
It tried to call a method in the controller which loops over the row data of the table returning true if at least one is selected, but that did not work either because I can not call methods from xhtml.
I am new to jsf and I could not find any solution to my problem on the internet.
How can I have my button disabled if none of the checkboxes are checked and enable it if at least one checkbox is checked?

Update form after closing dialog

I am new to JSF, checking related questions did not give me right answer.
I have 2 xhtml files. I specially delete all of items, like style, rendered, beans, etc. All the values displays good, but i cant make it update after pressing button.
1st of them named for example Description is a form with 3 tabs, each of them is a dataTable. Structure is a
<p:tabView id="tabs">
<p:tab id="first">
<h:form id="one">
<p:dataTable id="firstTable/>
</h:form>
</p:tab>
<p:tab id="second">
<h:form id="two">
<p:dataTable id="secondTable/>
</h:form>
</p:tab>
<p:tab id="third">
<h:form id="three">
<p:dataTable id="thirdTable/>
</h:form>
</p:tab>
2nd is a dialog, opened by some button in other component, here i can edit some inputs, and with commandButton "Save"
<h:form id="dialog">
<p:dataTable id="one">
<p:column headerText="FirstColumn">
<p:inputText onfocus="this.select()" id="newInput"
value="#{data['rmp']}"/>
</p:column>
</p:dataTable>
<p:commandButton id="save"
actionListener="#{dialogView.submit}"/>
</h:form>
After pressing "save" button i want my 2nd tab in first xhtml to update and display new value. It is only updates after i refresh the page manually.
I tried to add update="#([id$=':tabs:second'])" but it doesn't work right.
Please help me

Keep primefaces tooltip visible until its manually closed

I wanted to create a tooltip with dynamic content on a button hover and show a data table inside it. After a little bit of googling i managed to get that working but with a small issue. I am not able to keep the tooltip visible until its manually closed and primesfaces tooltip options do not seem to have any property to achieve something like that.
Code for tooltip:
<h:panelGroup>
<h:outputLink id="lnk" value="#">
<h:outputText value="Sample Tooltip"/>
</h:outputLink>
<p:tooltip for="lnk" position="right" />
<p:dataTable var="car" value="#{preOrderController.cars}">
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.name}" />
</p:column>
</p:dataTable>
</h:panelGroup>
The tooltip works fine, what I want to do is once the mouse is hovered over the button and tooltip is shown, I want to keep it visible until the user manually clicks the close button at the top right corner or somewhere else on the screen. It is not necessary that I use tooltip, if primefaces has something else that can used to get similar functionality I am open to suggestions.
The solution is here
<h:form>
<h:panelGrid>
<h:panelGroup>
<p:commandButton value="Hide" type="button" onclick="PF('tooltip').hide();"/>
</h:panelGroup>
<h:panelGroup>
<p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
<p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
Try this:
<h:form onclick="PF('tooltip').hide()">
<p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
<p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
</h:form>
Take note that you need to click inside the <h:form> in order to hide the tooltip

Primefaces CommandLink target blank not work properly

I'm trying to open a new window from dataTable using primefaces. I've tried differents options:
h:commandLink
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<h:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</h:commandLink>
</p:column>
</p:dataTable>
</h:form>
2.p:commandLInk
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<p:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'"
process="#this" ajax="false" target="_blank">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
It works, but not correctly. I mean, I get the new page open, but the original page becomes useless, all methods in this pages are not invoked when you clicked on them.
Has anyone experimented this before? Any idea to solve this?
I tried and I still couldn't get a 'commandLink' to open in a new window while at the same time using 'setPropertyActionListener'. I think you have to modify the underlying Primefaces javascript to open in a new window (I didn't try that).
You can try passing a parameter argument.

primefaces datatable selection issue

I have some weird issue with datatable selection (most likely i'm doing something wrong).
Idea is simple - datatable with selection and a dialog to edit the records. The problem is that if i use <h:inputText> tag (or <p:inputText>) it appears to be blank, though the object in the backing bean (indicatorBean.indicator.code) contains data. Interestingly if i put <h:outputText> instead of input the data is shown.
here are contents of my body
<!-- language: xml -->
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable id="indicatorsTable" var="ind"
value="#{indicatorBean.indicators}"
selectionMode="single"
selection="#{indicatorBean.indicator}"
rowKey="#{ind.id}">
<p:column headerText="Name" style="width:125px">
#{ind.name}
</p:column>
<p:column headerText="Code" style="width:125px">
#{ind.code}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View"
icon="ui-icon-search" update=":form:display"
oncomplete="indDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Indicator Detail"
widgetVar="indDialog" resizable="false"
width="400" showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Code:"/>
<!-- PROBLEM IS HERE -->
<h:inputText value="#{indicatorBean.indicator.code}"/>
<h:outputText value="Name:"/>
<h:outputText value="#{indicatorBean.indicator.name}"/>
</h:panelGrid>
<p:commandButton value="Save" onclick="indDialog.hide()"/>
<p:commandButton value="Cancel" onclick="indDialog.hide()"/>
</p:dialog>
</h:form>
</h:body>
Backing bean is nothing other that accessors.
Another thing i spotted is if i replace el expression in <h:inputtext> with a static text (like <h:inputText value="static text"/>), it is shown.
Here are some pictures:
Dialog with inputtext
Dialog with outputtext
Dialog with static text
primefaces 3.4
The problem as you seem to have already figured out is that you are placing the dialog itself inside of a form. This is an issue because of the way the jQuery dialog control works, which is the client side foundation of the Primefaces dialog. Essentially it will move DOM elements associated with the dialog elsewhere, possibly outside of the form that you intend to enclose it.
This problem can be easily solved by putting the dialog outside of the form, and putting a form inside of the dialog body instead.
<p:dialog id="dialogId" ...>
<h:form id="dlgForm">
....
</h:form>
</p:dialog>
In this way when jQuery UI moves the dialog control elsewhere in the DOM, the contents of that DOM, including the form come with it.

Resources