Vaadin 14 frontend javascript doesn't understand html element reference style #elemet_id

[letrthang]

Versions:

- Vaadin / Flow version: 14.6.5
- Java version: 11
- OS version: Linux
- Browser version (if applicable): latest chrome, edge
- Application Server (if applicable): Tomcat 9
- IDE (if applicable): N/A

It seems in frontend view, javascript doesn't understand html element reference style #elemet_id.

Example:

<div class="bt-drop-in-wrapper">
    <div id="bt-dropin"></div>
 </div>

<div th:include="fragments/homefooter :: footer"></div>
        <script src="https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js"></script>
        <script th:inline="javascript">
            /*<![CDATA[*/
            var form = document.querySelector('#payment-form');
            var client_token = [[${clientToken}]];

            braintree.dropin.create({
              authorization: client_token,
              container: '#bt-dropin',
              paypal: {
                flow: 'vault'
              }
            }, function (createErr, instance) {
              form.addEventListener('submit', function (event) {
                  event.preventDefault();
                  $('#errorDiv').hide();
                  $('#serverSideErrorDiv').hide();

                  instance.requestPaymentMethod(function (err, payload) {
                    if (err) {
                      console.log('Error', err);
                      showError(err);
                      return;
                    }

                    // Add the nonce to the form and submit
                    document.querySelector('#nonce').value = payload.nonce;
                    form.submit();
                  });
              });
            });

Reference to element "bt-dropin" at method braintree.dropin.create will fail. I am not sure this is limitation of vaadin 14 ?

P/S: I posted same issue here: https://stackoverflow.com/questions/68374506/braintree-gateway-integration-to-vaadin-14

[denis-anisimov]

Sorry, could you please clarify how this is related to Vaadin ? I don't see here any Flow usage.

Is this an HTML code snippet ? In this case it has nothing to do with Flow.

Is this a Polymer/Lit template code snippet ? Again: Polymer/Lit is a pure client side functionality and its work doesn't relate anyhow to Flow. OK from the stackoverflow question I see that this is a Polymer template. JS is just a JS on the client side . If it doesn't understand something then it's related only to the client side and doesn't relate to Flow.

Flow doesn't execute Polymer code at all. This is Polymer functionality and if something doesn't work then it doesn't work because of Polymer.

How to make Vaadin view understand JS style: "#element_id" ?

There is no such thing as Vaadin view. It's Polymer template. So please check Polymer documentation. I don't want to go deeper since I'm not a JS expert but notation $('#something') uses a selector to choose elements . And the question is : where you select the elements ? Inside HTML page (body) or inside a template ? Elements inside templates usually inside shadowRoot and may be this is the problem in your case.

Anyway: this has no relation to Flow.

[letrthang]

Hi Dennis,

Thanks for your explanation, agree that this has no relation to Flow, so i close this issue here. Anyway, elements is Inside HTML page (body) as you can see in above example.