首页 文章

ajax调用打破了primefaces日历组件

提问于
浏览
0

大家好,我对Primefaces的日历组件有问题 . 基于ajax的渲染日历组件下拉后不再显示 . 我做了实验,检查问题是在primefaces的日历本身 . 但事实并非如此,这是我的问题 . 我做错了什么或错过了什么 . 我不确定它是什么以及为什么 . 我整整一周都在苦苦挣扎 . 伙计们帮助我 .

这是包含菜单的通用模板 . 当用户单击其中一个菜单时,命令链接操作方法将仅返回页面作为字符串并使用ajax调用呈现带有id“content”的panelgroup .

<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>

这是模板客户端:

<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>

如果我删除带有id lcustomerList的p:selectOneMenu组件,具有id dateOfValuation的Primefaces日历组件可以正常工作,除非它不起作用 .

2 回答

  • 0

    这似乎是由this issue引起的 . 简而言之,如果您通过另一种形式的Ajax命令呈现表单,则第一个表单Ajax将停止工作 .

    这是JIRA item,它解释了它将在JSF 2.3中解决(希望如此)并提供一种解决方法 .

  • 1

    尝试更换

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

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

    并且通常不要将 f:ajax 与primefaces组件一起使用

相关问题