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...
Related
I have a datatable in primefaces with jsf and I need to check when the datatable is empty with jquery/js, but I have just found tags for "normal" datatables that don't work on PF.
Bean
private ArrayList<Curso> curs = null;
private ArrayList<Curso> listado_filtrado;
private DefaultStreamedContent informe_cursos;
Html
<p:outputPanel id="opTabla" >
<p:dataTable id="tabla_elements"
value="#{Cursos.curs}"
var="element"
filteredValue="#{Cursos.listado_filtrado}"
emptyMessage="No se encontraron elementos"
paginator="true" rows="20"
currentPageReportTemplate="{startRecord} a {endRecord} de {totalRecords}"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
paginatorPosition="bottom">
<p:ajax event="filter" update="exportar"/>
<f:facet name="header">
<div class="header-field-col">
<p:commandButton id="anadir_curso" value="Añadir curso nuevo" icon="ui-icon-plus" />
</div>
<div class="header-field-col">
<p:commandButton id="exportar" value="Exportar" ajax="false" disabled="#{empty Cursos.curs}"
icon="ui-icon-arrowreturnthick-1-s">
<p:fileDownload value="#{Cursos.informeCursos}" />
</p:commandButton>
</div>
</f:facet>
Your p:dataTable most likely references a list. Add an ajax event handler to it for e.g. the filter (all the ones that can make a page empty)
<p:dataTable value="#{myBean.myList}"...>
<p:ajax event="filter" update="exportButton" ... >
...
</p:dataTable>
use a p:commandButton with a disabled attribute like this:
<p:commandButton id="exportButton" value="export" disabled="#{empty myBean.myList}" ... />
It disables the commandButton client and serverside if the list is empty. So users cannot hack it client-side either.
The 'update' element in the commandButton makes sure the button state is, well,... updated on the relevant events. This is all rather basic ajax stuff, maybe read some tutorial on that
I'm having this issue with saving data from the grid in PrimeFaces. When I set the value in the cell, and then change another and another cell, click here and there, and then I click on the save button, everything is working perfect. But if I miss to exit the cell (to change the focus), and just click the save button, the value from that last cell is lost.
Here is my cell:
<p:cellEditor>
<f:facet name="output"><h:outputText style="text-transform: uppercase" value="#{bBean.someData}" /></f:facet>
<f:facet name="input">
<p:inputText style="text-transform: uppercase" value="#{bBean.someData}" label="Some data">
</p:inputText>
</f:facet>
</p:cellEditor>
It looks like PrimeFaces is not able to recognize the change if some event is not fired.
Any ideas?
Giving your <p:inputText> onmouseout event you can additionally save value when user leaves cell with mouse pointer:
<p:ajax event="mouseout" process="#this" partialSubmit="true"/>
Ok, now I fixed it for sure :)
I created a hidden button:
<p:commandButton process="#this" style="display:none !important" id="btn" value="SB"/>
and a javascript function that will simulate clicks on the hidden button:
function takefocus(){
$(PrimeFaces.escapeClientId('form:btn')).click();
}
and I added to the save button, before calling save:
<p:commandButton value="Save" onclick="takefocus();PF('waitDialog').show();saveData();"/>
and it is working fine.
The following works for Firefox, but not for Chrome.
So if you find a better solution please share it here.
<p:inputText onblur="triggerChange(this)... />
function triggerChange(el) {
var e = jQuery.Event('keydown');
e.which = 13;
e.keyCode = 13;
$(el).trigger(e);
}
Having a Question on JSF j:commandButton's action, chrome browser and JSF 1.1
Calling JavaScript function on click of command link as below
<h:dataTable>
<h:column>
<h:panelGroup rendered="#{expression which returns true}">
<f:verbatim rendered="#{someView.agentEdit}"> </f:verbatim>
<h:commandLink id= "editId" styleClass="commandLinkClass"rendered="#policyHistory.agentEdit}" onclick="return performPolicyHistoryAction('Edit', id);" value="Edit"/>
</h:panelGroup>
</h:column>
</h:dataTable>
With the above code I am getting the Link and it's able to call js function 'performPolicyHistoryAction'
In js function
function performPolicyHistoryAction(cntrlValue, cntrlId){
DWREngine.setAsync(false);
if (cntrlValue == 'Edit') {
document.getElementById("someString:lnkViewOnlyrefresh").click();
}
}
and someString:lnkViewOnlyrefresh is declared as
<h:commandButton action="#{someBean.viewOnlyAction}"
id="lnkViewOnlyrefresh" value="refresh" styleClass="hide" title="refresh"></h:commandButton>
here in chrome, not calling commandButton's action method. It's working fine in IE and FF
Note:If I put alert in <h:commandButton>'s onClick I am getting the alert.
Changed to onclick="return performPolicyHistoryAction('ViewOnly', id); " is changed to
onclick="performPolicyHistoryAction('ViewOnly', id); return false;"
in belowcode
<h:dataTable>
<h:column>
<h:panelGroup rendered="#{expression which returns true}">
<f:verbatim rendered="#{someView.agentEdit}"> </f:verbatim>
<h:commandLink id= "editId" styleClass="commandLinkClass"rendered="#policyHistory.agentEdit}" onclick="performPolicyHistoryAction('Edit', id); return false;" value="Edit"/>
</h:panelGroup>
</h:column>
</h:dataTable>
Working fine...
Thank you very much for your answer it helps me very much. In my case I was calling a click() action in the command button from Jquery. All this called from an input type image. But the page only refresh in chrome when submit and never called the datosTraficoJS in the managed bean, and for this reason the page never redirect to the next. Only in chrome and IE not works, FF works well.
I put the ";return false" after the onclick and it works very well.
The input type:
<input type="image" src="../resources/clock.png" onclick="editaTrafico(401); return false;"/>
The function:
function editaTrafico(idEmbarque) {
var fieldIdEmbarque = $("#consultaDespachosTraficoForm\\:hdnIdEmbarque");
fieldIdEmbarque.val(idEmbarque);
var botonTraf = $("#consultaDespachosTraficoForm\\:hdnBtn");
botonTraf.click();
}
The command button:
<h:commandButton id="hdnBtn" type="submit" action="#consultaDespachosTraficoBean.datosTraficoJS}"
value="#{msg.gen_filtrar}" />
Hope it helps to someone else.
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.
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 {
}