-2

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?

Hossein
  • 1,151
  • 9
  • 19
  • Please add [a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – tsotzolas Aug 18 '19 at 09:46
  • this is NOT a [mcve]. Or does it acutally work if you remove one of the ccs or js file from your page? Or one column or the subtable or reflow or...? Or when you don't use spring-flow – Kukeltje Aug 20 '19 at 07:18
  • I can't remove the spring webflow. But I will try removing the external csses. Although I dot see how is it relevant. Because the ajax call is happening but doesn't get to my method – Hossein Aug 20 '19 at 07:25
  • Why can't you **for a [mcve]** NOT remove spring webflow? You CAN 1000% sure... And remove the ui:inserts and more... the dialog etc... – Kukeltje Aug 20 '19 at 08:22
  • And the parent-child relation between the dto's can be removed and the dto classes themselves be replaced with java `KeyPair` – Kukeltje Aug 20 '19 at 08:32
  • Lol getting roasted by my boi @Kukeltje, try using h:commandlink instead of p:commandlink, tell me if that works – BugsForBreakfast Aug 20 '19 at 20:41
  • It's not roasting, it's real life... people are lazy to try to create a [mcve] while in reality it helps getting you a solution more quickly. Either via an answer or during the process of creating a [mcve] finding the root cause – Kukeltje Aug 20 '19 at 22:38
  • @BugsForBreakfast thanks for the reply. but didn't work. I had to change my strategy. – Hossein Aug 21 '19 at 06:50
  • @Kukeltje thanks for the reply. But this community used to be more helpful. Changing a lot of the stuff in my situation wouldn't help me find the answer because this is a big implemented system so it is not possible to change every thing. – Hossein Aug 21 '19 at 06:51

1 Answers1

-1

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>
Hossein
  • 1,151
  • 9
  • 19