Uncaught TypeError：FormNapperにHTMLFormElement要素または1のID文字列が必要です

Question

クレジットカード情報用のカスタムフォームを作成するためにbraintreeの準備を整えようとしているので、単純に機能しないフォームがあります。

私はUiBinderサンプルメッセージでこのフォームを作成していた場合ただし、：

<g:HTML ui:field="creditCardFormContainer">    
    <form id="credit-card-form" name="credit-card-form" action="/app/create-credit-card" method="post" target="hidden-iframe"> 

     <label for="card-number">Card Number</label> 
     <div id="card-number"/> 

     <label for="cvv">CVV</label> 
     <div id="cvv"/> 

     <label for="expiration-date">Expiration Date</label> 
     <div id="expiration-date"/> 

     <input id="nonce" name="nonce" type="hidden" value="" /> 
     <input type="submit" value="Add credit card" />    
    </form> 
</g:HTML> 

とタイプcredit-card-formのチェックを行い、私は実際にそれは私が期待していタイプではないことを見ていますそれはである：

private native void setupCreditCardForm(String domId, String serverToken) /**/-{ 

    var form = $doc.getElementById(domId); 

    if (form instanceof HTMLFormElement != true) { 
     console.log(typeof(form)); // Prints 'object' 
     throw new TypeError("Form must be of type HTMLFormElement"); // Gets thrown .. 
    } 

    // Never reached .. 

    var bt = braintree; 

    braintree.setup(
     serverToken, 
     "custom", 
     { 
      id: domId, 
      hostedFields: { 
       number: { 
        selector: "#card-number" 
       }, 
       cvv: { 
        selector: "#cvv" 
       }, 
       expirationDate: { 
        selector: "#expiration-date" 
       } 
      }, 
      onPaymentMethodReceived: function(details) { 
       this.@com.mz.client.admin.widget.paymentmethodinfo.PaymentMethodInfoView::onPaymentMethodReceived(Ljava/lang/String;)(details.nonce); 
      } 
     }); 
}-/**/; 

これはなぜですか？私は明確にformを作成しています - なぜこれはうまくいかないのですか？

hereと同様に、documentationに記載されています。 $wnd.braintreeでなければなりません

FormNapper requires an HTMLFormElement element or the id string of one. 

Answer 1

braintree：ブレインツリーはGWTが実行されている非表示のiframeに実行されている場合は、そのIDによって形を見ることができない以上、このチェックを削除

は私にbraintree.setup()から次のエラーを与えるだろう。フォームの要素を渡すことはできますが、BraintreeはGWTのiframeではなく、「トップウィンドウ」に注入する必要があります。

同様に、instanceofはiframeの境界のために機能しません。$wnd.HTMLFormElementを使用してください。ブレインツリーJavaScriptコードの注入について

：

あなたはTOP_WINDOWに注入するScriptInjectorを伝えるために必要がある場合があります。例えば：私は `VAR bを割り当てた場合

braintreeJs = ScriptInjector.fromUrl(BRAINTREE_JS_URL).setCallback(
    new Callback<Void, Exception>() { 
     @Override 
     public void onFailure(Exception caught) { 
      // .. 
     } 
     @Override 
     public void onSuccess(Void result) { 
      // .. 
     } 
    }).setWindow(ScriptInjector.TOP_WINDOW).inject();