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()
Related
I have a nested datatable that has an Edit command button, that shows a dialog modal,
<p:commandButton value="Edit" oncomplete="PF('editStudy').show()" type="button">
<p:ajax event="click" listener="#{queryStudiesBean.setRenderDialog(true)}" update="editDialogStudy" />
<p:ajax event="click" listener="#{queryStudiesBean.setEditableStudyIndex(studyIndex)}" update="editDialogStudy: />
<p:ajax event="click" listener="#{queryStudiesBean.setEditablePatientIndex(patientIndex)}" update="editDialogStudy" />
</p:commandButton>
I was fixing the issue of keeping the rows of the child datatable expanded after updating, I was following this answer , but I faced another problem that once I load the datatable page, even before I click on the Edit button, the dialog commandButton that has the update attribute gets evaluated,
<p:commandButton process="#form" update="#form,:form2:patient-dt:#{queryStudiesBean.editablePatientIndex}:study-dt" action="#{queryStudiesBean.updateStudy()}" oncomplete="PF('editStudy').hide()" value="Save" styleClass="fixed-button-size" />
, this gives null error as patientIndex is still null, as I didn't even click on the edit button of the datatable to set the patientIndex.
So I managed to solve this by adding rendered="#{queryStudiesBean.renderDialog}" attribute to the dialog.
Now I have difficulties setting this boolean to true in the edit button action, the dialog doesn't shows right now, in the above code, I used oncomplete, and set the boolean value in <p:ajax> (as both action attribute, and <f:setPropertyActionListener> doesn't work for me, I was thinking that the boolean will be set to true before the oncomplete gets called, so the dialog shows, but this is not happend, can someone explains to me why? I saw alots of posts but no one worked for me.
full datatable code
full dialog code
I'm using:
primefaces 6.2,
java8
If your update="#form,:form2:patient-dt:#{queryStudiesBean.editablePatientIndex}:study-dt references parentIndex, it will already been called when the button is rendered.
Your update="editDialogStudy" needs to be update=":editDialogStudy" because it's
inside a row of a datatable.
You update the form, but the rendered is outside the form, so it
won't be updated. Put a <h:panelGroup... around the dialog and update
the panelGroup
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".
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 don't know how to implement onclick event on a combobox, my boss want me to do is once the user click a value in the combobox it automatically search and display all the value of the selected/click item. First question is it possible to have an onclick event on a JSF page without using any javascript/jquery? Right now I'm using ADF for designing the interface. Second question how can I implements this onclick event on my combobox?
There are a couple of ways to achieve this:
Use a valueChangeListener and execute your query when it fires.
Set autoSubmit="true" and when the bound value changes, execute your query.
Only selecting a value in a dropdown won't submit your form. This is not about JSF but HTML .. so without any JS i think it's not possible.
I do not know anything about ADF in special but in plain JSF you just have to add an ajax-event to your dropdown (e.g. in primefaces)
<h:form id="id1">
<p:selectOneMenu id="id2" value="#{myBean.value}"
immediate="true" editable="true" >
<f:ajax execute="#this" listener="#{myBean.doSomeAction}" />
<f:converter converterId="myConverter" />
<f:selectItems value="#{myBean.availableOptions}" />
</p:selectOneMenu>
</h: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" ...>