CODEWITHSUNDEEP
jsf-2primefaces
Odgiiv
Odgiiv

Reputation: 703

ajax call breaks primefaces calendar component

Hello guys I have a problem with Primefaces' calendar component. After ajax based rendering calendar components drop down not showing up anymore. I did experiment to check that problem is in primefaces' calendar itself. But it's not, it's my problem. I did something wrong or missed something. I'm not sure what it is and why. I'm struggling a whole week. Guys help me out.

Here is general template which contains menus. When user click one of the menus, command link action method will return only page as string and render panelgroup with id 'content' with ajax call. 

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <h:outputStylesheet library ="css" name="cssLayout.css"/>
    <h:outputStylesheet library ="css" name="Regcss.css"/>
    <h:outputStylesheet library ="css" name="expandable_menu_css.css"/>

    <title>Title</title>
    <script type="text/javascript"> // which is js code to show ajax status.
        function showStatus(data){
            var inputElement = data.source; //the html dom input element.
            var ajaxStatus = data.status;
            var statusDialog = document.getElementById("ajaxDiv");
            switch(ajaxStatus){
                case "begin":
                    statusDialog.style.display = 'block';
                    break;
                case "complete":
                    statusDialog.style.display = 'none';
                    break;
                case "success":
                    //
                    break;
            }
        }
    </script>
</h:head>
<h:body>
   <div id ="ajaxDiv" style="display: none;">
        <p:dialog id="ajaxStatus" widgetVar="statusDialog" header="It's loading."         draggable="false" closable="false" visible="true" style="font-size: 12px;">
            <p:graphicImage value="../resources/img/ajax-loading-bar.gif"/>
        </p:dialog>
   </div>
   <div id="top"/>
   <h:form id ="form_main">
       <div id="left">
           <div class="img">
           <img src="../resources/img/login_page.png" width="250" height="117"    alt="login_page"/>
           </div>
           <div id="menu">     
                <div class="menu-item">
                    <input id="menu-button1" class ="menu-button" type ='checkbox'/>
                    <h4><label for="menu-button1">General</label></h4>
                    <ul id ="menus1">
                            <li><a href="#"> Search
                                </a></li>
                            <li><a href="#">Config</a></li>
                            <li><a href="#">Report</a></li>
                            <li><a href="#">Help</a></li>
                    </ul>
                </div>
                <div class="menu-item">
                    <input id="menu-button2" class ="menu-button" type ='checkbox'/>
                    <h4><label for="menu-button2">Customers</label></h4>
                    <ul id ="menus2">
                            <li><h:commandLink action="#{editCustomerView.prepareCustomerList}" value="Customers">
                                    <f:ajax render=":content"  onevent="showStatus"/>
                                </h:commandLink></li>
                            <li><h:commandLink action ="#{insertOrganizationView.prepareNewOrganization}" value="Organization">
                                    <f:ajax render=":content" onevent="showStatus"/>
                                </h:commandLink></li>
                            <li><h:commandLink action ="#{insertCitizenView.prepareNewCitizen}" value="Citizen">
                                    <f:ajax render=":content" onevent="showStatus"/>
                                </h:commandLink></li>
                    </ul>
                </div>

           </div>
           </div>
   </h:form>
   <h:panelGroup id="content">
        <div class="left_content">
            <div id ="most_outer_panel" class="panel">
                <div id="messages_div" style="padding: 5px; font-size: 12px; width: 80%; margin-left: auto; margin-right: auto;">
                    <p:messages id="messages" closable="true"/>   
                </div>
                <ui:insert name="content">
                </ui:insert>
            </div>
        </div>
   </h:panelGroup>
</h:body>

Here's template client:

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/General.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">

    <ui:define name="content">
        <h:form id ="RegMrt">
        <div id="panel1">
        <div id="input">
            <h4>Choose customer</h4>
            <p:selectOneMenu id ="lcustomerList" value="#{insertMortgageView.newlmain}" style="width: 200px" var="loan" converter="#{convertToLoanMain}"> 
                <f:selectItems value="#{editLoanMainView.loanMainList}" var="loanMain" itemLabel="#{loanMain.advAmount}" itemValue="#{loanMain}"/>
                    <p:column>
                        <h:outputText value="#{loan.loanCode}"/>
                    </p:column>
                    <p:column>
                        <h:outputText value="#{loan.startedDate}">
                            <f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>
                    <p:column>
                        <h:outputText value="#{loan.description}"/>
                    </p:column>
            </p:selectOneMenu>
        </div>
        </div>
        <p:calendar  id="dateOfValuation" value="#{insertMortgageView.newMortgage.dateOfValuation}" showButtonPanel="true" navigator="true" required="true" requiredMessage="Заавал!"  converterMessage="Буруу" pattern="dd/MM/yyyy" mindate="01/01/1900" yearRange="-120:-0">
        <f:ajax render="mdateOfValuation" event="blur"/>
        </p:calendar> 
    </h:form>
    </ui:define>
</ui:composition>

if I remove p:selectOneMenu component with id lcustomerList, Primefaces calendar component with id dateOfValuation works fine, unless it won't work.

Upvotes: 0

Views: 2131

Answers (2)

Daniel
Daniel

Reputation: 37051

Try to replace 

 <f:ajax render="mdateOfValuation" event="blur"/>

with 

 <p:ajax update="mdateOfValuation" event="blur"/>

And in general don't use f:ajax with primefaces components

Upvotes: 1

SJuan76
SJuan76

Reputation: 24780

This seems caused by this issue. In short, if you render a form through an Ajax command in another form, the first form Ajax stops working.

This is the JIRA item, which explains that it will solved in JSF 2.3 (hopefully) and provides a workaround.

Upvotes: 0

Related Questions