Javascript работает только при перезагрузке, а не при начальной загрузке - PullRequest
Новая
       13

Javascript работает только при перезагрузке, а не при начальной загрузке

0 голосов
/ 17 апреля 2019

Проблема: Мой сценарий работает только после перезагрузки страницы.

У меня есть турбо ссылки и я пытался использовать: 

$(document).on('turbolinks:load', function(){

var client_token_ = "<%= @client_token_ %>";
var form = document.querySelector('#payment_form-4-a');
var nonceInput = document.querySelector('#nonce-a');

  braintree.dropin.create({
    authorization: client_token_,
    container: '#dropin-container-2',
    paypal: {
      flow: 'checkout',
      amount: "<%= @listing.listing_video.price %>",
      currency: 'USD'
    },
    venmo: {
      allowNewBrowserTab: false
    }
  }, function (err, dropinInstance) {
    if (err) {
      // Handle any errors that might've occurred when creating Drop-in
      console.error(err);
      return;
    }
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      dropinInstance.requestPaymentMethod(function (err, payload) {
        if (err) {
          // Handle errors in requesting payment method
          return;
        }

        // Send payload.nonce to your server
        nonceInput.value = payload.nonce;
        form.submit();
      });
    });
  });
})

вместо $(document).on('turbolinks:load', function(){ Я тоже попробовал:

$( document ).ready(function() {

document.addEventListener("turbolinks:load", function() {

Я также пытался использовать функцию с onclick, которая работает, но проблема в том, что страница имеет 2 формы, и один сценарий будет «загружаться», но каким-то образом будет сочетаться с другим и загружаться в другую форму.

Вот полные 2 сценария JavaScript в шапке: Таким образом, я заставил оба скрипта работать на странице вместе, но тот, у которого нет функции onclick, является скриптом, который нуждается в перезагрузке, и он также является последним на странице. После перезагрузки все работает отлично. 

<script >
    function BraintreeFunction_4() {
    var client_token = "<%= @client_token %>";
    var form = document.querySelector('#payment_form-4');
    var button = document.querySelector('#submit-button');
    var nonceInput = document.querySelector('#nonce');

      braintree.dropin.create({
        authorization: client_token,
        container: '#dropin-container',
        paypal: {
          flow: 'checkout',
          amount: "<%= @listing.listing_video.price %>",
          currency: 'USD'
        },
        venmo: {
          allowNewBrowserTab: false
        }
      }, function (err, dropinInstance) {
        if (err) {
          // Handle any errors that might've occurred when creating Drop-in
          console.error(err);
          return;
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault();

          dropinInstance.requestPaymentMethod(function (err, payload) {
            if (err) {
              // Handle errors in requesting payment method
              return;
            }

            // Send payload.nonce to your server
            nonceInput.value = payload.nonce;
            form.submit();
          });
        });
      });
    }
  </script>
  <script >
    var client_token_ = "<%= @client_token_ %>";
    var form = document.querySelector('#payment_form-4-a');
    var button = document.querySelector('#submit-button');
    var nonceInput = document.querySelector('#nonce-a');

      braintree.dropin.create({
        authorization: client_token_,
        container: '#dropin-container-2',
        paypal: {
          flow: 'checkout',
          amount: "<%= @listing.listing_video.price %>",
          currency: 'USD'
        },
        venmo: {
          allowNewBrowserTab: false
        }
      }, function (err, dropinInstance) {
        if (err) {
          // Handle any errors that might've occurred when creating Drop-in
          console.error(err);
          return;
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault();

          dropinInstance.requestPaymentMethod(function (err, payload) {
            if (err) {
              // Handle errors in requesting payment method
              return;
            }

            // Send payload.nonce to your server
            nonceInput.value = payload.nonce;
            form.submit();
          });
        });
      });
  </script>

В заголовке или в теле результаты одинаковы.

Я заставил оба скрипта работать на странице вместе, но тот, у которого нет функции onclick, является скриптом, который нуждается в перезагрузке, и он также является последним на странице. После перезагрузки все работает отлично

Есть ли способ сделать так, чтобы тот без функции загружался на страницах начальной загрузки? Обычно я могу решить эту проблему с помощью turbolinks: загрузите, как я уже говорил выше, но это не решит эту проблему

...