I recently updated my project libraries. Primefaces 5.2 > 7.0 myFaces 2.1.13 > 2.2.12
after the update one of the <p:commandLink>s actionListener is not invoked anymore.
The javascript code I have in the oncomplete is working fine, an ajax request is being sent to the server and returns a fine response, but the actionListener is not invoked.
The commandLink is inside a p:dataTable.
And there is no error in the inspector console!
I have followed this answer : https://stackoverflow.com/a/2120183/1378936 But no luck.
The bean :
public class TestBean {
public static final Logger log = Logger.getLogger(TestBean.class);
private List<TestDataDto> testData;
private SubDataDto selectedData;
private String title;
public List<TestDataDto> getTestData() {
return testData;
}
public SubDataDto getSelectedData() {
return selectedData;
}
public String getTitle() {
return title;
}
public void loadTestData() {
this.testData = new ArrayList<>();
TestDataDto e = new TestDataDto();
ArrayList<SubDataDto> subDatas = new ArrayList<>();
for (int i = 0; i < 10; i++) {
SubDataDto dto = new SubDataDto();
dto.setRowNumber(i + 1);
dto.setTitle("title " + i + " item");
dto.setType((i % 2 == 0) ? "Even" : "Odd");
dto.setAmount((i + 1) * 10000);
subDatas.add(dto);
}
e.setSubDatas(subDatas);
testData.add(e);
}
public void setSelectedDataTitle(String title) {
this.title = title;
}
}
The flow :
<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/webflow
http://www.springframework.org/schema/webflow/spring-webflow.xsd">
<view-state id="test">
<on-entry>
<evaluate expression="testBean.loadTestData()"/>
</on-entry>
</view-state>
</flow>
The xhtml :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:sec="http://www.springframework.org/security/sabatags">
<f:view locale="#{themeSwitcherBean.localeCode}">
<h:head>
<title>#{msgs['application.title']} : <ui:insert name="title">#{msgs['empty.page.header']}</ui:insert></title>
<meta http-equiv="Pragma" content="no-store"/>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Expires" content="-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<ui:insert name="styles"/>
<ui:insert name="inHead"/>
<h:outputScript name="js/number.js" target="head"/>
<h:outputScript name="js/amountConvertor.js" target="head"/>
<link type="text/css" rel="stylesheet" media="all"
href="#{request.contextPath}/resources/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" media="all"
href="#{request.contextPath}/resources/css/style.css"/>
<link type="text/css" rel="stylesheet" media="all"
href="#{request.contextPath}/resources/css/font-awesome.min.css"/>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/resources/css/custom-primefaces.css"/>
<link type="text/css" rel="styl esheet"
href="#{request.contextPath}#{themeSwitcherBean.directionStyleSheet}"/>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/resources/css/countdown/jquery.countdown.css"/>
<!--<link type="text/css" rel="stylesheet"-->
<!--href="#{request.contextPath}/resources/css/morris.css"/>-->
<script type="text/javascript"
src="#{request.contextPath}/resources/js/saba-primefaces-ext.js"></script>
<script type="text/javascript"
src="#{request.contextPath}/resources/js/countdown/jquery.plugin.min.js"></script>
<script type="text/javascript"
src="#{request.contextPath}/resources/js/countdown/jquery.countdown.min.js"></script>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/resources/css/sib-reportviewer.css"/>
<script type="text/javascript"
src="#{request.contextPath}/resources/js/sib-reportviewer.js"></script>
<h:outputScript library="js" name="jquery.ui.datepicker.js"
rendered="#{themeSwitcherBean.localeCode == 'FA' or themeSwitcherBean.localeCode == 'fa'}"/>
<h:outputScript library="js" name="jquery.ui.datepicker-cc.all.min.js"
rendered="#{themeSwitcherBean.localeCode == 'FA' or themeSwitcherBean.localeCode == 'fa'}"/>
<h:outputScript library="js" name="jquery.ui.datepicker-fa.js"
rendered="#{themeSwitcherBean.localeCode == 'FA' or themeSwitcherBean.localeCode == 'fa'}"/>
<h:outputScript library="js" name="raphael-min.js"/>
<h:outputScript library="js" name="morris-0.4.1.min.js"/>
<h:outputScript library="js" name="moment.js"/>
<h:outputScript library="js" name="moment-jalaali.js"/>
</h:head>
<p:panel id="accountOverviewPanel" styleClass="tab-content">
<h:form id="form">
<h:inputHidden value="#{tabCheckBean.tabId}" id="form_client_id" readonly="true">
<f:param name="name" value="_client_id"/>
</h:inputHidden>
<p:dataTable reflow="false" id="dataTable" var="data"
styleClass="table-bordered table-striped table-condensed cf"
value="#{testBean.testData}"
selection="#{testBean.selectedData}"
selectionMode="single"
currentPageReportTemplate="#{msgs['primefaces.currentPageReportTemplate']}"
emptyMessage="#{msgs['primefaces.datagrid.no.data']}"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" lazy="true"
rows="10"
rowIndexVar="rowNum">
<p:columnGroup type="header">
<p:row>
<p:column headerText="RowNum"/>
<p:column headerText="Title"/>
<p:column headerText="Type"/>
<p:column headerText="Amount"/>
<p:column headerText="Actions"/>
</p:row>
</p:columnGroup>
<p:subTable id="subData" var="sub" value="#{data.subDatas}">
<p:column>
<h:outputText value="#{sub.rowNumber}"/>
</p:column>
<p:column>
<h:outputText value="#{sub.title}"/>
</p:column>
<p:column>
<h:outputText value="#{sub.type}"/>
</p:column>
<p:column>
<h:outputText value="#{sub.amount}"/>
</p:column>
<p:column>
<p:commandLink title="Show Data"
actionListener="#{testBean.setSelectedDataTitle(sub.title)}"
oncomplete="PF('subTitleDlg').show()"
update=":subTitleDialog" ajax="true">
<p:graphicImage value="/resources/img/save.png"/>
</p:commandLink>
</p:column>
</p:subTable>
</p:dataTable>
</h:form>
</p:panel>
<p:dialog id="subTitleDialog" widgetVar="subTitleDlg" dynamic="true"
modal="true" closable="true" closeOnEscape="true"
width="450" visible="false">
<br/>
<p:outputLabel value="selected title is : "/>
<div style="text-align: left;">
<p:outputLabel value="#{testBean.title}"/>
</div>
</p:dialog>
</f:view>
</html>
When I hit the save commandLink, I expect the actionListener be executed and then the dialog be opened and show the selected title.
I have added a break point in the target method, but nothing happens there.
Any idea how can I find the problem and solve it?
Apparently something is wrong with the commandLink being in a dataTable. Trying h:commandLink didn't resolve the problem neither.
So I had to do a trick inorder to make it work again.
I've added a hidden input in my form outside the dataTable, then updated its value on the click event of my commandLink and set the commandLink to process it. the changes look like this :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<f:view>
<h:head>
<title>#{msgs['application.title']} : <ui:insert name="title">#{msgs['empty.page.header']}</ui:insert></title>
<meta http-equiv="Pragma" content="no-store"/>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Expires" content="-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<ui:insert name="styles"/>
<ui:insert name="inHead"/>
<h:outputScript name="js/number.js" target="head"/>
<!--<h:outputScript name="js/jquery-3.2.1.min.js" target="head"/>-->
<h:outputScript name="js/amountConvertor.js" target="head"/>
<!--<h:outputScript name="js/bootstrap.min.js" target="head"/>-->
<!--<h:outputScript name="js/custome.js" target="head"/>-->
<!--<script type="text/javascript"-->
<!--src="#{themeSwitcherBean.applicationPath}/resources/js/custome.js"></script>-->
<link type="text/css" rel="stylesheet" media="all"
href="#{themeSwitcherBean.applicationPath}/resources/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" media="all"
href="#{themeSwitcherBean.applicationPath}/resources/css/style.css"/>
<link type="text/css" rel="stylesheet" media="all"
href="#{themeSwitcherBean.applicationPath}/resources/css/font-awesome.min.css"/>
<link type="text/css" rel="stylesheet"
href="#{themeSwitcherBean.applicationPath}/resources/css/custom-primefaces.css"/>
<link type="text/css" rel="stylesheet"
href="#{themeSwitcherBean.applicationPath}#{themeSwitcherBean.directionStyleSheet}"/>
<link type="text/css" rel="stylesheet"
href="#{themeSwitcherBean.applicationPath}/resources/css/countdown/jquery.countdown.css"/>
<!--<link type="text/css" rel="stylesheet"-->
<!--href="#{themeSwitcherBean.applicationPath}/resources/css/morris.css"/>-->
<script type="text/javascript"
src="#{themeSwitcherBean.applicationPath}/resources/js/saba-primefaces-ext.js"></script>
<script type="text/javascript"
src="#{themeSwitcherBean.applicationPath}/resources/js/countdown/jquery.plugin.min.js"></script>
<script type="text/javascript"
src="#{themeSwitcherBean.applicationPath}/resources/js/countdown/jquery.countdown.min.js"></script>
<link type="text/css" rel="stylesheet"
href="#{themeSwitcherBean.applicationPath}/resources/css/sib-reportviewer.css"/>
<script type="text/javascript"
src="#{themeSwitcherBean.applicationPath}/resources/js/sib-reportviewer.js"></script>
<h:outputScript library="js" name="jquery.ui.datepicker.js"
rendered="#{themeSwitcherBean.localeCode == 'FA' or themeSwitcherBean.localeCode == 'fa'}"/>
<h:outputScript library="js" name="jquery.ui.datepicker-cc.all.min.js"
rendered="#{themeSwitcherBean.localeCode == 'FA' or themeSwitcherBean.localeCode == 'fa'}"/>
<h:outputScript library="js" name="jquery.ui.datepicker-fa.js"
rendered="#{themeSwitcherBean.localeCode == 'FA' or themeSwitcherBean.localeCode == 'fa'}"/>
<h:outputScript library="js" name="raphael-min.js"/>
<h:outputScript library="js" name="morris-0.4.1.min.js"/>
<h:outputScript library="js" name="moment.js"/>
<h:outputScript library="js" name="moment-jalaali.js"/>
</h:head>
<p:panel id="accountOverviewPanel" styleClass="tab-content">
<h:form id="form">
<h:inputHidden value="#{tabCheckBean.tabId}" id="form_client_id" readonly="true">
<f:param name="name" value="_client_id"/>
</h:inputHidden>
<p:inputText type="hidden" widgetVar="selectedDataTitleWgt" id="selectedDataTitle"/>
<p:dataTable reflow="false" id="dataTable" var="data"
styleClass="table-bordered table-striped table-condensed cf"
value="#{testBean.testData}"
selection="#{testBean.selectedData}"
selectionMode="single"
currentPageReportTemplate="#{msgs['primefaces.currentPageReportTemplate']}"
emptyMessage="#{msgs['primefaces.datagrid.no.data']}"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" lazy="true"
rows="10"
rowIndexVar="rowNum">
<p:columnGroup type="header">
<p:row>
<p:column headerText="RowNum"/>
<p:column headerText="Title"/>
<p:column headerText="Type"/>
<p:column headerText="Amount"/>
<p:column headerText="Actions"/>
</p:row>
</p:columnGroup>
<p:subTable id="subData" var="sub" value="#{data.subDatas}">
<p:column>
<h:outputText value="#{sub.rowNumber}"/>
</p:column>
<p:column>
<h:outputText value="#{sub.title}"/>
</p:column>
<p:column>
<h:outputText value="#{sub.type}"/>
</p:column>
<p:column>
<h:outputText value="#{sub.amount}"/>
</p:column>
<p:column>
<p:commandLink title="Show Data"
onclick="PF('selectedDataTitleWgt').jq.val('#{sub.title}');"
process=":form:selectedDataTitle"
ajax="true">
<p:graphicImage value="/resources/images/save.png"/>
</p:commandLink>
</p:column>
</p:subTable>
</p:dataTable>
</h:form>
</p:panel>
</f:view>
</html>