Setting bean property before opening Primefaces dialog - jsf

I would like to achieve this functionality.
<p:column>
<p:commandLink value="prihlasit" oncomplete="dlg.show();"
action="#{signForProjectBean.setProjectForDetail(item)}" />
</p:column>
I think is pretty clear what I am trying to do, I would like to display detail of the row in dataTable on which user have clicked. So my approach is to set property of current row to bean and then show the detail in dialog. But it is not working and I am feeling that I am doing something really wrong:-)

If the dialog component is supposed to display the selected item, then you need to ajax-udpate the dialog's content before opening it. Otherwise it will still display the old content as it was when the page is rendered for the first time.
<p:commandLink value="prihlasit" update=":dlg" oncomplete="dlg.show();"
action="#{signForProjectBean.setProjectForDetail(item)}" />
...
<p:dialog id="dlg" ...>

Related

Remove component from page source when visible is set to false

I have a situation when I want a primefaces' dialog to be displayed only under some conditions so what I made is to set visible attribute. Now I wonder, is it possible to hide component in rendered html when visible is set to false? Let's say someone wiser will work with my application and he will decide to display page's source code and there he will notice my hidden dialog and then he will remove my 'visible' attribute. What happens is that dialog will be displayed to him although it shouldn't be shown. Of course I can write my methods in such way that even if he display the dialog he will not be able to do anything wrong but I would prefer to remove my dialog from rendered html. Is it possible?
Use the rendered attribute and set it to false.
<h:panelGroup layout="block" id="enclosing-panel">
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40" rendered="#{somecController.dialogRendered}">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
</h:panelGroup>
Whenever you need the dialog use ajax to refresh a div(<h:panelGroup/>) enclosing the dialog.
<p:commandButton value="show dialog" type="button" oncomplete="PF('dlg1').show();" actionListener="#{somecController.refreshPanel}" update="enclosing-panel" />

Primefaces : update dialog content and keep it open

I'm working with JSF and PrimeFaces, and I can't handle the following situation:
I have a dialog, and I placed a dataTable on it. In one of the cells of the table I would like to display given data in 3 different ways, and I'd like to switch between them. So far I managed to switch between these rendering types via commandLink, but my problem is that when I click on one of the 3 links, the dialog closes! Can I update the content of the dialog, and be able to keep it open the same time? (I'm updating which render type to use via myMethod)
my commandLink looks like this:
<p:commandLink id="id" update=":myForm:myDialog" ajax="false"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
If i don't use the ajax=false attribute, the method is not called, and I also tried imediate=true, but that's not it either.
You need to define an p:outputPanel inside your dialog and update the outputpanel, not the dialog itself (that's why your dialog closes):
<p:dialog id="myDialog" ...>
<p:outputPanel id="myOutputPanel">
... your dialog content goes here
</p>
</p:dialog>
and change your commandlink
<p:commandLink id="id" update=":myForm:myDialog:myOutputPanel" ajax="true"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
Regarding the oncomplete="dialog.show()" - I'm not entirely sure if you need that. A precise answer can be given if you provide more code regarding your table and code.
I had the same problem, and solution is to update a form instead of dialog. For example:
<p:dialog id="id_dialog" ...>
<h:form id="id_form">
... content
</h>
</p:dialog>
and commandLink:
<p:commandLink update=":id_form" process="#all" ...>
This worked for me!

How to set focus on inputtext within the seletedRow of dataTable in PrimeFaces?

The scenario is like this:
There is a datatable with many rows and each row contains an inputtext, there is a keypad outside the table, when user click a button in the keypad, the inputtext within the selectedRow would be updated, I want it to be onfocus so user can also use keyboard to input further texts.
I used p:commandButton to be the keypad button with use ajax submit to set selectedItem in bean and update the datatable to make the inputtext change, but after that, the focus is either lost or on the first inputtext of the page.
I am using primeface 3.4.
The codes go something like this:
<p:dataTable id="datatable1" var="item" value="#{bean.itemlist}" rowKey="#{item.id}" rowIndexVar="rowIndex"
widgetVar="datatableVar" selection="#{bean.selectedItem}" selectionMode="single">
<p:column>
<p:inputText id="name" value="#{bean.selectedItem.name}"
onfocus="datatableVar.unselectAllRows();datatableVar.selectRow(#{rowIndex})" >
</p:column>
...
</p:dataTable>
<p:commandButton value="1" update="datatable1" id="bt1"
actionListener="#{bean.appendItem('1')}" />
I guest I could use oncomplete event of p:commandButton to set the inputtext focus, but there seems no client side API in p:dataTable to get the selected Row.
I ended up using jQuery selector to select that inputText. In the rendered html code,the selected row(tr) has an attributed "aria-selected='true'".
The JS code goes:
var ele=$($("[aria-selected='true']").find('input').get(0));
The ele is a jQuery component that I can operate with, like ele.focus() or ele.keyup()

Is there a way how to trigger an event / make a commandbutton hide when selectCheckboxMenu in primefaces unselected all items

i wanted to know if theres a way how to hide a commandbutton to the end users when he deselects all items in the selectCheckboxMenu.
thanks for every comments and suggestions.
Just let the rendered attribute of the command button check if the very same property behind the value attribute of select checkbox menu does not represent an empty collection. You can re-execute this check by updating a persistent parent component of the button using <p:ajax> on change of the select checkbox menu.
So, in a nutshell:
<p:selectCheckboxMenu value="#{bean.selectedItems}">
<f:selectItems value="#{bean.availableItems}" />
<p:ajax update="button" />
</p:selectCheckboxMenu>
<h:panelGroup id="button">
<p:commandButton value="Submit" rendered="#{not empty bean.selectedItems}" />
</h:panelGroup>
No need for unnecessary code such as additional bean properties or listener methods specifically for value change and rendered attribute or ugly hacks such as valueChangeListener as mentioned by the other answer whose answerer is apparently having JSF 1.x in mind.
For command button set rendered attribute for ex
In managed bean create a boolean variable allCheckBoxNotSelected with getters and setters
For checkboxes in valueChangeListener attribute call a managed bean method which will check current values for all check box. If it is not selected then put false to allCheckBoxNotSelected variable and then upadate command button through its id.

ui:repeat with a list sending right object to a p:dialog

I currently have a giant ui:repeat. Within this ui:repeat, some of the repeated objects have a url to a popup image associated with them. When someone clicks display under that particular object, I need the url to popup in a p:dialog.
<ui:repeat var="thing" value="#{bean.thingList}">
<p:commandLink value="details" onclick="miniImage.show();"
update=":#{p:component('chart')}"
action="#{bean.setCurrentImg(thing.imageUrl)}"
rendered="#{thing.includeImage}">
</p:commandLink>
</ui:repeat>
and at the bottom of the page:
<p:dialog id="chart" widgetVar="miniImage" >
<h:graphicImage value="#{bean.currentImg}"/>
</p:dialog>
And in the backing bean I tried using a simple setter and getter for currentImg.
I am a bit confused on this now and would like to accomplish this without having to submit the entire form as well. Any help is greatly appreciated.
If you're using PrimeFaces 3.3 or newer, you could just add partialSubmit="true" to the command component. You can then control the to-be-processed components in process attribute. In this particular case, just the current component (the command component itself) is sufficient, thus so process="#this":
<p:commandLink ... process="#this" partialSubmit="true" />
This way only the request parameters which are really necessary for the process will be sent.
Unrelated to the concrete problem, I suggest to use oncomplete instead of onclick to open the dialog. Otherwise the dialog is opened before update takes place and may cause poor user experience as the enduser would see the image instantly changing.

Resources