Java 在Wicket框架中选择客户类型（ajax实现的组件）后隐藏DatePicker图标

我正在使用Wicket框架创建UI。当我点击CustomerRegistration时，新页面被加载。一切看起来都很好。日期选择器图标也在那里，如图所示

我在客户类型上实现了ajax。选择“客户类型”时，必须呈现页面。渲染后，日期选择器图标不存在，如图所示

HTML文件：

final String chooseDtTxt = this.basePage.getLocalizer().getString(
        "datepicker.chooseDate", basePage);

    add(new HeaderContributor(new IHeaderContributor() {

        private static final long serialVersionUID = 1L;

        @Override
        public void renderHead(IHeaderResponse response) {
        captcha = "";

        // localize the jquery datepicker based on users locale setting
        // locale specific js includes for datepicker are available at
        // http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
        String localeLang = getLocale().getLanguage().toLowerCase();

        LOG.debug("Using DatePicker for locale language: {}",
            localeLang);

        response.renderJavascriptReference("scripts/jquery/i18n/jquery.ui.datepicker-en.js");
        response.renderJavascriptReference("scripts/jquery/jquery.min.js");
        response.renderJavascriptReference("scripts/jquery/jquery-ui.min.js");
        response.renderJavascriptReference("scripts/jquery/jquery.maskedinput.js");
        response.renderJavascriptReference("scripts/jquery/customization.js");

        RenderJavaScriptComponent renderJavaScriptComponent = new RenderJavaScriptComponent();
        renderJavaScriptComponent.renderDateComponent(response,
            "#birthDate", chooseDtTxt, true);
        renderJavaScriptComponent.renderDateComponent(response,
            "#cnicExpiryDate", chooseDtTxt, true, true);


        }
    }));

customertypes.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    private static final long serialVersionUID = 1L;

    @Override
    protected void onUpdate(AjaxRequestTarget target) {

    if (customer.getCustomerTypeId() != null){
        kycDiv.setVisible(true);
        if(attachmentsPanel != null){
            attachmentsPanel.setVisible(true);  
        }

        permanentAddressDiv.setVisible(true);
        businessAddressDiv.setVisible(false);

        switch(customer.getCustomerTypeId().intValue()){
        case (Constants.MBANKING_CUSTOMER_TYPE):
                    kycDiv.setVisible(false);
        break;

        case (Constants.STANDARD_CONSUMER):
                    kycDiv.setVisible(false);
        break;

        case (Constants.MERCHANT): 
        break;

        case (Constants.MERCHANT_AGENT):
                    kycDiv.setVisible(false);
        break;

        case (Constants.BENEFICIARY): 
                    kycDiv.setVisible(false);
        break;

        case (Constants.MERCHANT_HEADQUARTER): 
                    accountProfileDiv.setVisible(false);
                    accountProfileMerchantDiv.setVisible(true);
        break;

        case (Constants.MERCHANT_DEALER):
                    kycDiv.setVisible(false);
        break;

        case (Constants.CONSUMER_WITH_FEE):
                    kycDiv.setVisible(false);
        break;

        case (Constants.CUSTOMER_TYPE_L1): 
        case (Constants.CUSTOMER_TYPE_L0): 
                    kycDiv.setVisible(false);
                    accountProfileDiv.setVisible(false);
                    accountProfileMerchantDiv.setVisible(false);
                    businessDetailDiv.setVisible(false);

                    motherNameDiv.setVisible(true);
                    fatherHusbandNameDiv.setVisible(true);
                    placeOfBirthDiv.setVisible(true);
                    mailingAddressDiv.setVisible(true);
                    msisdnDiv.setVisible(true);
                    kvInfoModeDiv.setVisible(true);
                    landLineDiv.setVisible(true);
                    kvIdentityTypeDiv.setVisible(true);
                    cnicExpiryDateDiv.setVisible(true);
                    kvIdentityValueDiv.setVisible(true);
                    birthDateTextField.setVisible(true);
                    birthDateDiv.setVisible(true);
                    identityInfoTitleDiv.setVisible(true);
                    rolesAndPrivilegesDiv.setVisible(false);

        break;

        case (Constants.CUSTOMER_TYPE_L2_INDIVIDUAL_NEW): 
        case (Constants.CUSTOMER_TYPE_L2_INDIVIDUAL_10000): 
        case (Constants.CUSTOMER_TYPE_L2_INDIVIDUAL_50000): 
        case (Constants.CUSTOMER_TYPE_L2_INDIVIDUAL_99999): 
        case (Constants.CUSTOMER_TYPE_L2_INDIVIDUAL_500000):

                    kycDiv.setVisible(true);
                    accountsDiv.setVisible(false);
                    businessDetailDiv.setVisible(false);
                    accountProfileDiv.setVisible(true);
                    accountProfileMerchantDiv.setVisible(false);
                    salaryDiv.setVisible(false);
                    otherIncomeDiv.setVisible(false);
                    typeOfTransactionDiv.setVisible(false);
                    currentBusinessSinceDiv.setVisible(false);
                    premisesDiv.setVisible(false);

                    motherNameDiv.setVisible(true);
                    fatherHusbandNameDiv.setVisible(true);
                    placeOfBirthDiv.setVisible(true);
                    mailingAddressDiv.setVisible(true);
                    msisdnDiv.setVisible(true);
                    kvInfoModeDiv.setVisible(true);
                    landLineDiv.setVisible(true);
                    kvIdentityTypeDiv.setVisible(true);
                    cnicExpiryDateDiv.setVisible(true);
                    kvIdentityValueDiv.setVisible(true);
                    birthDateTextField.setVisible(true);
                    birthDateDiv.setVisible(true);
                    identityInfoTitleDiv.setVisible(true);
                    rolesAndPrivilegesDiv.setVisible(false);

        break;
        case (Constants.CUSTOMER_TYPE_AGENT_FINJA): 
        case (Constants.CUSTOMER_TYPE_L2_MERCHANT): 
                    kycDiv.setVisible(true);
                    businessDetailDiv.setVisible(true);
                    permanentAddressDiv.setVisible(false);
                    accountProfileDiv.setVisible(false);
                    accountProfileMerchantDiv.setVisible(true);
                    salaryDiv.setVisible(true);
                    otherIncomeDiv.setVisible(true);
                    typeOfTransactionDiv.setVisible(true);
                    currentBusinessSinceDiv.setVisible(true);
                    premisesDiv.setVisible(true);
                    accountsDiv.setVisible(true);
                    typeOfCustomer_NotCustomerTypeDiv.setVisible(false);
                    purposeOfAccountDiv.setVisible(false);
                    bankRecognitionMediumDiv.setVisible(false);
                    modeOfTransactionDiv.setVisible(false);

                    motherNameDiv.setVisible(true);
                    fatherHusbandNameDiv.setVisible(true);
                    placeOfBirthDiv.setVisible(true);
                    mailingAddressDiv.setVisible(true);
                    msisdnDiv.setVisible(true);
                    kvInfoModeDiv.setVisible(true);
                    landLineDiv.setVisible(true);
                    kvIdentityTypeDiv.setVisible(true);
                    cnicExpiryDateDiv.setVisible(true);
                    kvIdentityValueDiv.setVisible(true);
                    birthDateTextField.setVisible(true);
                    birthDateDiv.setVisible(true);
                    identityInfoTitleDiv.setVisible(true);
                    rolesAndPrivilegesDiv.setVisible(false);
        break;

        case (Constants.CUSTOMER_TYPE_CST_SUB_AGENT): 
                    kycDiv.setVisible(false);
                    businessDetailDiv.setVisible(false);
                    businessAddressDiv.setVisible(false);
                    permanentAddressDiv.setVisible(false);
                    accountProfileDiv.setVisible(false);
                    accountProfileMerchantDiv.setVisible(false);
                    salaryDiv.setVisible(false);
                    otherIncomeDiv.setVisible(false);
                    typeOfTransactionDiv.setVisible(false);
                    currentBusinessSinceDiv.setVisible(false);
                    premisesDiv.setVisible(false);
                    accountsDiv.setVisible(false);
                    typeOfCustomer_NotCustomerTypeDiv.setVisible(false);
                    purposeOfAccountDiv.setVisible(false);
                    bankRecognitionMediumDiv.setVisible(false);
                    modeOfTransactionDiv.setVisible(false);

                    motherNameDiv.setVisible(false);
                    fatherHusbandNameDiv.setVisible(false);
                    placeOfBirthDiv.setVisible(false);
                    mailingAddressDiv.setVisible(false);
                    msisdnDiv.setVisible(false);
                    kvInfoModeDiv.setVisible(false);
                    landLineDiv.setVisible(false);
                    kvIdentityTypeDiv.setVisible(false);
                    cnicExpiryDateDiv.setVisible(false);
                    kvIdentityValueDiv.setVisible(false);
                    birthDateDiv.setVisible(false);
                    identityInfoTitleDiv.setVisible(false);
                    rolesAndPrivilegesDiv.setVisible(true);
        break;      

        case (Constants.CUSTOMER_TYPE_GUEST): 
                    kycDiv.setVisible(false);
                    attachmentsPanel.setVisible(false);
        break;

        default : 
        break;
        }

    }else{
    }

    target.addComponent(kycDiv);
    target.addComponent(accountProfileDiv);
    target.addComponent(accountProfileMerchantDiv);

    target.addComponent(businessDetailDiv);
    target.addComponent(permanentAddressDiv);

    target.addComponent(businessNameDiv);
    target.addComponent(ntnNumberDiv);
    target.addComponent(businessAddressDiv);

    target.addComponent(salaryDiv);
    target.addComponent(otherIncomeDiv);
    target.addComponent(typeOfTransactionDiv);
    target.addComponent(currentBusinessSinceDiv);
    target.addComponent(premisesDiv);

    target.addComponent(monthlyExpectedDepositDiv);
    target.addComponent(monthlyExpectedWithdrawalDiv);
    target.addComponent(expectedAvgBalanceDiv);
    target.addComponent(annualTurnoverDiv);
    target.addComponent(expectedMonthlyCreditSalesDiv);

    target.addComponent(averageMonthlyInflowDiv);
    target.addComponent(averageMonthlyOutflowDiv);
    target.addComponent(averageYearlySalesDiv);
    target.addComponent(avergaeYearlyIncomeDiv);

    target.addComponent(typeOfCustomer_NotCustomerTypeDiv);
    target.addComponent(purposeOfAccountDiv);
    target.addComponent(bankRecognitionMediumDiv);
    target.addComponent(modeOfTransactionDiv);

    target.addComponent(infoModeSMSEmail);
    target.addComponent(motherNameDiv);
    target.addComponent(fatherHusbandNameDiv);
    target.addComponent(placeOfBirthDiv);

    target.addComponent(msisdnDiv);
    target.addComponent(kvInfoModeDiv);
    target.addComponent(landLineDiv);
    target.addComponent(kvIdentityTypeDiv);
    target.addComponent(cnicExpiryDateDiv);
    target.addComponent(kvIdentityValueDiv);
    target.addComponent(birthDateTextField);
    target.addComponent(birthDateDiv);
    target.addComponent(mailingAddressDiv);
    target.addComponent(identityInfoTitleDiv);


    if(attachmentsPanel != null){
        target.addComponent(attachmentsPanel);  
    }

    }
});

文件头

<head>
  <wicket:head>
    <script src="scripts/jquery/jquery-ui-1.8.17.custom.min.js"></script>
    <script src="scripts/jquery/jquery.min.js"></script>
    <script src="scripts/jquery/jquery-ui.min.js"></script>
    <script src="scripts/jquery/jquery.maskedinput.js"></script>
    <script>
        jQuery(function($){
            $("#identityValue").mask("99999-9999999-9");
            $("#cnicBeneficial").mask("99999-9999999-9");
            $("#msisdn").mask("03999999999");
        });
    </script>
    <script src="scripts/jquery/customization.js">function();</script>

</wicket:head>
</head>

出生日期字段和Div

<div class="input" wicket:id="birthDateDiv">
<label for="birthDate"><wicket:message key="birthDate" /><span class="required">*</span></label> 
<input readonly="readonly" tabindex="6" type="text" size="10" wicket:id="birthDateField" id="birthDate" style="width: 150px;" />
</div>

final WebMarkupContainer birthDateDiv = new WebMarkupContainer("birthDateDiv");

final DateTextField birthDateTextField = new DateTextField("birthDateField", new PropertyModel<Date>(
        this, "customer.birthDateString"), new PatternDateConverter(Constants.DATE_FORMAT_PATTERN_PARSE, false));
birthDateTextField.setOutputMarkupPlaceholderTag(true);

birthDateDiv.add(birthDateTextField);
birthDateDiv.setOutputMarkupPlaceholderTag(true);
form.add(birthDateDiv);

完整的代码（html和java）文件也上传到这个链接上

---

您的AjaxFormComponentUpdateBehavior将“生日”组件添加到

AjaxRequestTarget

，从而替换浏览器中的标记

这将还原以下行所做的任何操作：

renderJavaScriptComponent.renderDateComponent(response, "#birthDate", chooseDtTxt, true);

你的选择是：

• 使您的dateField成为“真实”组件，即让它负责添加必要的JavaScript
• 当客户类型更改时更新整个面板，以便在Ajax更新后恢复标题贡献：
  添加（RegisterCustomerPanel.this）

更新：为什么dateField不是一个真正的组件

---

因为它不是独立的。当您通过Ajax更新它时，它仍然可以正常工作。它没有，因为它依赖于包含面板来提供JavaScript。

您的AjaxFormComponentUpdateBehavior将“生日”组件添加到

AjaxRequestTarget中，从而替换浏览器中的标记

这将还原以下行所做的任何操作：

renderJavaScriptComponent.renderDateComponent(response, "#birthDate", chooseDtTxt, true);

你的选择是：


使您的dateField成为“真实”组件，即让它负责添加必要的JavaScript
当客户类型更改时更新整个面板，以便在Ajax更新后恢复标题贡献：

添加（RegisterCustomerPanel.this）


更新：为什么dateField不是一个真正的组件

因为它不是独立的。当您通过Ajax更新它时，它仍然可以正常工作。它不是，因为它依赖于包含面板来提供JavaScript。
datefield是一个真正的组件，datefield只是从JavaScript文件中获取日历。如果我想更新整个面板，我该怎么做？你能举例说明两点吗？我已经扩展了我的答案。在我的例子中，我将添加target.addComponent（表单）；因为主div wicket id是registerCustomerForm，而这个div在java中的映射是final Form Form=new Form（“registerCustomerForm”，new CompoundPropertyModel（this））；我说的对吗？如果表单贡献了JavaScript部分，那么是的，您可以只更新整个表单。请注意，如果您将标题参与者添加到包含面板中，则更新表单不会有任何帮助。datefield是一个真正的组件，datefield只是从javascript文件获取日历。如果我想更新整个面板，我该怎么做？你能举例说明两点吗？我已经扩展了我的答案。在我的例子中，我将添加target.addComponent（表单）；因为主div wicket id是registerCustomerForm，而这个div在java中的映射是final Form Form=new Form（“registerCustomerForm”，new CompoundPropertyModel（this））；我说的对吗？如果表单贡献了JavaScript部分，那么是的，您可以只更新整个表单。请注意，如果将标题参与者添加到包含面板，则更新表单将没有帮助。