Uncaught TypeError: FormNapper требует элемента HTMLFormElement или строки 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.

Удаление этот чек выше дал бы мне следующую ошибку приходя от braintree.setup():

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

Answer 1

braintree должен быть $wnd.braintree: если Braintree работает в скрытом IFRAME GWT работает в, он не может видеть форму через его ID , Передача элемента формы может работать, но Braintree следует вводить в «верхнее окно», а не в iframe GWT.

Аналогичным образом, instanceof не работает из-за границей iframe: используйте $wnd.HTMLFormElement.

Что касается введения кода JavaScript Брэйнтри:

Вы, возможно, придется сказать ScriptInjector, чтобы ввести в TOP_WINDOW. Например:

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