WicketフレームワークでCustomer Type（ajax実装コンポーネント）を選択した後、DatePickerアイコンが非表示になる

Wicketフレームワークを使用してUIを作成しています。顧客登録をクリックすると、新しいページが読み込まれます。すべてがよさそうだ。日付ピッカーアイコンも写真のように表示されます。 WicketフレームワークでCustomer Type（ajax実装コンポーネント）を選択した後、DatePickerアイコンが非表示になる

カスタマータイプにajaxを実装しました。顧客タイプを選択すると、ページをレンダリングする必要があります。レンダリング後、日付ピッカーアイコンは画像に示されていません。

HTMLファイル：

ファイルヘッダ

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

Javaコード：

ヘッダー：

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


     } 
    }));

BirthdateFieldと本部

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

とAjaxFormComponentUpdatingBehaviorは次のとおりです。

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); 
    } 

    } 
});

フル・コード（HTMLとJava）も、このリンクを http://pastebin.com/Dr92A9Vq

出典

2017-02-09 Abdul Majid Bajwa

をアップロードされたファイルあなたAjaxFormComponentUpdatingBehaviorは、このように、ブラウザでそのマークアップを置き換える、AjaxRequestTargetに「たbirthDate」コンポーネントを追加します。

これは、次の行が行っているものは何でも戻り：

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

あなたのオプションは以下のとおりです。

すなわち、「本当の」コンポーネントをお使いのDateField作ることが必要なJavaScript
カスタマータイプが変更されたときにパネル全体を更新するので、Ajaxの更新後にヘッダーの投稿が復元されます。

target.add（RegisterCustomerPanel.this）;

アップデート： '本当の' コンポーネントをDateFieldにされていないのはなぜ？

自己完結型ではないためです。 Ajaxで更新すると、それはまだ機能するはずです。これは、JavaScriptを提供するパネルを含むパネルに依存しているためではありません。

出典

2017-02-09 14:11:48 svenmeier

datefieldは実際のコンポーネントです。datefieldはjavascriptファイルからカレンダーを取得します。どのように私はこれを行うことができます全体のパネルを更新したい場合は？あなたは例を挙げて2つの点を詳述できますか？ –

私は自分の答えを広げました。 – svenmeier

私の場合は、** target.addComponent（form）; **を追加します。メインのwicket IDは** registerCustomerForm **で、このdivのマッピングは** finalです。 form = new Form（ "registerCustomerForm "、 \t \t新しいCompoundPropertyModel （））; **そうですか？ –

WicketフレームワークでCustomer Type（ajax実装コンポーネント）を選択した後、DatePickerアイコンが非表示になる

答えて

関連する問題