Отправка form_tag как ajax либо выдает ошибку UnknownFormat, либо отображает js как html - PullRequest
Новая
       26

Отправка form_tag как ajax либо выдает ошибку UnknownFormat, либо отображает js как html

0 голосов
/ 06 ноября 2018

У меня есть форма Stripe, и я продолжаю сталкиваться с ошибками при попытке отправить ее с помощью Ajax.

Полный код ниже, но строка, которую я пытался настроить, - это строка form_tag. С этим: 

<%= form_tag(buy_path(@product.id), id:'payment-form', authenticity_token: true, remote: true) do %>

Я получаю эту ошибку: 

ActionController::UnknownFormat in UsersController#buy
ActionController::UnknownFormat

respond_to do |format|  <= HIGHLIGHTED
  format.js
end

Но когда я указываю js формат: 

<%= form_tag(buy_path(@product.id, format: :js), id:'payment-form', authenticity_token: true, remote: true) do %>

Файл js просто отображается как обычный html. Например, браузер просто печатает содержимое: 

$("html").hide();

Вот мой полный код. Когда я удаляю встроенный javascript, buy.js.erb отображается как обычно, поэтому, похоже, что-то добавлено с javascript, что делает браузер неспособным обработать запрос как ajax.

buy.html.erb 

<!-- The form. Fields are inserted into #card-element with JS -->
<%= form_tag(buy_path(@product.id), id:'payment-form', authenticity_token: true, remote: true) do %>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  <button id="submit-card">Submit Payment</button>
  <div id="cancel-bid">Cancel</div>
<% end %>

<script type="text/javascript">

  var stripe = Stripe('<%= key %>');
  var elements = stripe.elements();

  // Create an instance of the card Element.
  var card = elements.create('card', {style: style});

  // Add an instance of the card Element into the `card-element` <div>.
  card.mount('#card-element');

  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // Create a token or display an error when the form is submitted.
  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the customer that there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
      }
    });
  });

  function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    // Submit the form
    form.submit();
  }
</script>

users_controller / гь 

def buy
  respond_to do |format|
    format.js
  end
end

buy.js.erb 

$("html").hide();
...