Develop Reference

Set default value inputText jsf with javascript [duplicate]

I have a JSF 2 application that has two pages, one to list students and one to show details of a given student. The listing page has a link to the details page in each row of the students table, that opens a new tab in browser to show those details, when clicked.
Now the requirements changed to no more show details in a new tab, but in a modal dialog in the listing page.
My idea is to simply embed the details page content in the modal dialog so the listing page will not get too big and hard to maintain. Here start my doubts. After some research I changed the link in each row of the listing to the following button:
<p:commandButton value="Details" type="button"
onclick="PF('dialog-details').show()">
</p:commandButton>
The dialog is declared as follows:
<p:dialog widgetVar="dialog-details" header="Details" modal="true" width="95%">
<ui:include src="student_details.xhtml">
<ui:param name="id" value="#{student.id}"/>
</ui:include>
</p:dialog>
Finally, the details page was changed to be something like this:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:metadata>
<f:viewParam name="id" value="#{studentBean.id}" />
</f:metadata>
<h1 class="title ui-widget-header ui-corner-all">Details of #{studentBean.bean.name} / #{studentBean.bean.number}</h1>
</ui:composition>
When I click the button, the dialog really shows and the content is the details page. I see the following content in the dialog:
Details of /
No errors at all, but the data that should be shown, isn't. A breakpoint was set in StudentBean.setId() (this method loads a property named bean with the Student instance corresponding to the passed id) but it is never hit.
After some time thinking about it, I came to understand why it does not work. The parameter passed to the details page is student.id, but student is the name used as the var in the <p:datatable/> that show all the students, so student is not valid in <p:dialog/> which is outside the <p:datatable/>.
So, what I need is a way to show the dialog using the id of the corresponding student in a given row. Ideally, I would like an ajax call here, so the details would loaded only when neded.
Any ideas?

The button should be an ajax button which sets the currently iterated entity in the bean, and then updates the dialog's content, and finally shows it. The dialog should just reference that entity in the bean and update the list and table on save. It's very important that dialog is placed outside the main form and that it has its own form.
Here's a kickoff example:
<h:form id="master">
<p:dataTable value="#{bean.entities}" var="entity">
<p:column>#{entity.property1}</p:column>
<p:column>#{entity.property2}</p:column>
<p:column>#{entity.property3}</p:column>
...
<p:column>
<p:commandButton value="View" action="#{bean.setEntity(entity)}"
update=":detail" oncomplete="PF('detail').show()" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="detail" widgetVar="detail">
<h:form>
<p:inputText value="#{bean.entity.property1}" />
<p:inputText value="#{bean.entity.property2}" />
<p:inputText value="#{bean.entity.property3}" />
...
<p:button value="Close" onclick="PF('detail').hide(); return false" />
<p:commandButton value="Save" action="#{bean.save}"
update=":master" oncomplete="if(!args.validationFailed) PF('detail').hide()" />
</h:form>
</p:dialog>
With this inside a #ViewScoped bean:
private List<Entity> entities; // +getter
private Entity entity; // +getter+setter
#EJB
private EntityService entityService;
#PostConstruct
public void load() {
entities = entityService.list();
entity = null;
}
public void save() {
entityService.save(entity);
load();
}
See also:
Creating master-detail pages for entities, how to link them and which bean scope to choose
Creating master-detail table and dialog, how to reuse same dialog for create and edit
Keep p:dialog open when a validation error occurs after submit
Difference between rendered and visible attributes of <p:dialog>
How to display dialog only on complete of a successful form submit

Datatables row id in JavaScript

I would like to get the id of datatables row to call click() on a hidden button in the same table cell.
It is done that way because all buttons have to look like h:commandButton and i couldn't force p:commandButton look like them. And h:commandbutton doesn't have oncomplete event. I know I could use DataModel, but is there another way to do it (using JS, JQuery)?
When i put hardoced id (p:table:4:hiddenButton) everything is ok, but how to get that row number for each cell??
<h:form id="p">
<h:dataTable value="#{bean.paymentList}" var="pmt" id="table" >
...
<h:column>
<f:facet name="header">
<h:outputText value="#{bundle.action}" />
</f:facet>
<h:commandButton type="button" value="#{bundle.approve}"
onclick="document.getElementById('p:table:??:hiddenButton').click();" />
<p:commandButton id="hiddenButton" value="hidden" style="display: none;"
oncomplete="if (#{pmt.errorsNum} > 0) {
return confErrDial.show();
} else {
return confDial.show();};">
<f:setPropertyActionListener value="#{pmt.id}" target="#{bean.holder}" />
</p:commandButton>
</h:column>
</h:dataTable>
</h:form>
EDIT:
Ok i did some trick using JQuery, it may be not nice but works.
What I did:
I added id to h:commandButton and on onclick event i get id of h:commandButton and replace its id with id of hidden p:commandbutton, so its code is now:
<h:commandButton id="button" type="button" value="#{bundle.approve}"
onclick="document.getElementById(($(this).attr('id')).replace('button','hiddenButton')).click();"
Still maybe someone knows better solution.
PS: It is strange because $(this).parent().attr('id') is null. I think it has something with that no element is created with id p:table:0 p:table:1 etc...

JSF Primefaces set button enabled when table row is selected

I have a list of users in a table and with disabled Delete button. I need to enable the Delete button when I select the row in the table. How can I do this?
<p:dataTable value="#{userBean.patients}" var="item"
selectionMode="single" rowKey="#{item.id}"
selection="#{userBean.selected}"
onRowSelected="deleteButton.disabled='false';"> // HOW TO WRITE THIS EVENT CORRECTLY?????
// columns
</p:dataTable>
//This button must be enable after I click on any table row
<p:commandButton id="deleteButton" value="Delete" disabled="true" />
Maybe, I need to use onRowClick event. I dont know the name of this event

Thanks for jsfviky71 !
I write:
<h:form id="form">
<p:dataTable value="#{bean.patients}" var="item"
selectionMode="single" rowKey="#{item.id}"
selection="#{bean.selected}" >
<p:ajax event="rowSelect" update=":form:deleteButton" listener="#{bean.onRowSelect}" />
// data in rows
</p:dataTable>
<p:commandButton id="deleteButton" value="Delete" disabled="#{bean.disabled}"/>
And in my bean:
private Boolean disabled = true;
// getter and setter
public void onRowSelect(SelectEvent event) {
disabled = false;
}
Hope this will help to others

One solution could be using
<p:ajax event="rowSelect" update=":deleteButton" listener="#{bean.someListener}" />
inside datatable.
This catches the row selection event, calls a listener and updates the button.
Now you could define the listener in the backing bean that just updates the value of a boolean instance variable, that reflects the disabled/enabled status of the button in the view:
<p:commandButton id="deleteButton" value="Delete" disabled="#{bean.selectedBoolean}" />
You can take a look at primefaces showcase for a similar scenario:
http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf
Hope this helps.

How to disable a form field using ajax in a commandlink of a datatable

I have a form above which captures Contract records and displays them in a datatable which has a commandlink "Edit" tag. When I click “Edit” I would like the form populated with this contract data but with the Contract No field disabled. I’m trying to do this disabling in an Ajax onEvent tag and it is working (ie the disabling). However, the fields are not being populated/displayed in the form when the ajax is being used. If I remove it, everything is fine only that the Contract No will b editable.
These are my edit tags.
<h:commandLink id="editLink" value="#{bundle.ListUnitEditLink}" >
<f:ajax onevent="disablePK" listener="#{contractManager.updateContract}" />
</h:commandLink>
This is my backing bean.
public String updateContract() {
System.out.println("Now in UPDATECONTRACT method and serious debugging");
current = (Contract) items.getRowData();
this.newContractId=current.getContractid();
this.newContractDesc=current.getContractdesc();
this.newContractDt=current.getContractdt();
this.newContractAmt=current.getContractamt();
this.newContractStrtDt=current.getContractstrtdt();
this.newExpDuration=current.getExpduration();
this.newCtdBy=current.getCtdby();
this.newCtdOn=current.getCtdon();
this.lstUpdBy=current.getLstupdby();
this.lstUpdOn=current.getLstupdon();
return "contracts";
}
The properties in the bean are being given correct values but they are not appearing in the form to be edited.

I sorted out my problem by adding render=#all in the ajax tag
<h:commandLink id="editLink" value="#{bundle.ListUnitEditLink}"
actionListener="#{contractManager.updateContract}">
<f:ajax onevent="disablePK" render="#all" />
</h:commandLink>

update and rendered tags in JSF

I'm trying to display/not display a primefaces datatable using the update tag in primefaces.
The table will render correctly when I reload (F5) the page but then I will lose all the data I had imputed into the form. I was looking around for an ajax solution but I have been unable to find any so far.
My code:
<h:form id="adminForm">
<h:selectOneMenu id="adminTypeMenu" value="#{adminBean.orgType}">
<f:selectItem itemValue="" itemLabel="- Select One -"/>
<p:ajax actionListener="#{adminBean.updateOrgType}" update="adminForm" />
</h:selectOneMenu>
<p:dataTable id="adminMacTable" value="#{adminBean.currentArray}" var="currentOrg"
rendered="#{adminBean.Type eq 'bco'}" selection="#{adminBean.selectedMac}"
emptyMessage="No Records Found">
...
</p:dataTable>
</h:form>
The Currently implementation displays the dataTable but erases any form inputs I had. Is there a way to render the datatable without clearing out my form values?
Update: Just tried the same code without and used but got the same result, still trying other methods!

Try this:
<h:form id="adminForm" prependId="false">
<h:selectOneMenu id="adminTypeMenu" value="#{adminBean.orgType}">
<f:selectItem itemValue="" itemLabel="- Select One -"/>
<p:ajax actionListener="#{adminBean.updateOrgType}" update="adminMacOutput" />
</h:selectOneMenu>
<p:outputPanel id="adminMacOutput">
<p:dataTable id="adminMacTable" value="#{adminBean.currentArray}" var="currentOrg"
rendered="#{adminBean.Type eq 'bco'}" selection="#{adminBean.selectedMac}"
emptyMessage="No Records Found">
...
</p:dataTable>
</p:outputPanel>
</h:form>
If that doesn't work, try putting the datatable inside a separate form and update this second form.

I'm guessing that AdminBean might be in request scope in which case your ajax event will update it but then it gets recreated when you press F5. If so then ViewScoped will help:
#ManagedBean(name = "adminBean")
#ViewScoped
public class AdminBean {
}