I want to hide/show <p:panel> on commandButton click with some condition ,I tried following
<h:form>
// some tag here
<p:commandButton value="EDIT" ajax="false"
onclick="if(#{bean.status == 'ACTIVE'}){editable.show();}"
actionListener="#{beanMgnt.edit}">
</h:form>
and editable is a panel as
<p:panel widgetVar="editable" closable="true"
toggleable="true" visible="false">
// some tags here
</p:panel
edit method is doing only sysout.
What I want when enduser clicks the button this panel will be visible with bean data populated with Editable text boxes.
I want to make visible this panel visible with button click.How to do that?
You also have to use update="<id>" in your button...
so,for example, you would need <p:commandButton...update="thepanelid".../> <p:panel id="thepanelid"...
I think you could use a boolean attribute in your backing bean. In the panel you put : visible="backingbean.yourAttribute" and you use a method in your bean to control it via onclick.
onclick="backingbean.theMethod"
In the method, if your condition is verified, you can set the attribute to "true".
Related
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" />
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()
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.
I have a data-entry form that displays a number of fields (mostly p:inputText) for the user to provide. Some of these are LOVs so I display a p:dialog to allow the user to select the right value. The p:dialog is displayed by means of a p:commandLink next to the p:inputText. Main parts of code shown below:
<h:form id="parentForm">
(...)
<p:inputText value="#{CustomerCEVController.customer.municipality}" id="customerMncName"/>
<p:commandLink type="button" onclick="MunicipalityDlg.show()" styleClass="ui-icon ui-icon-search"/>
(...)
<p:commandButton value="Submit" id="save" actionListener="#{CustomerCEVController.saveButtonListener}" /> (...)
</h:form>
The problem is, whenever the user clicks on the p:commandLink to display the p:dialog (to allow him to select one of the values) the outer form goes through its lifecycle phases (restore view, apply request values, process validations, etc.) since the p:commandLink is placed inside an h:form. How can I implement this dialog-displaying functionality while avoiding posting the h:form with every dialog that the user opens?
Just add "return false" as the last statement to onclick event handler. It prevents commandLink's default function (posting the form).
Just add set the appendToBody attribute to true on <p:dialog>
<p:dialog header="Header Text" widgetVar="dlg" appendToBody="true">
//Content
</p:dialog>
This appends the dialog as a child of the document body outside the parent form.
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" ...>