Не могу отправить форму, пока я не перезагрузлю

Question

Я сталкиваюсь с этой ошибкой в ​​браузере, и теги выбора не отображаются, пока я не перезагружаюсь.

Uncaught TypeError: Cannot read property 'submit' of null
    at HTMLInputElement.onchange (VM2264 items:1)

Для управления возвратами моего интернет-магазина у меня есть следующее:

• У меня есть HTML-таблица, в которой перечислены товары, которые я купил там количество.
• В этой таблице (где каждая строка представляет форму) я могу выбрать конкретные элементы для возврата в этом списке с проверкой коробка
• Если количество товара больше 1 (например, 3), то после его проверки появляется тег выбора с возможностью выбора количества для возврата 1, 2, 3 ...

Эта форма (таблица) находится в списке предметов

<table class="table">
    <tbody>
        <% @items.each do |item|%>
            <tr>

                <td><%= image_tag item.order_item.variant.product.attachments.first.url, class: "small_image" %></td>
                <td><%= item.quantity %></td>
                <td>
                    <%= item.order_item.variant.product.title %> 
                    <br>
                    <%= item.order_item.variant.product.color %>
                </td>
                <td><%= item.order_item.variant.size %></td>
                <td><%= number_to_currency_euro item.order_item.variant.product.price %></td>


                <%= form_with model: @item, method: :patch, remote: true, html: { class: "update-form"} do |f| %>
                    <%= f.hidden_field :id, value: item.id %>
                    <% if item.quantity <= 1 %>
                        <% if item.selected == true %>
                            <td><%= f.check_box :selected, { checked: true, value: item.selected, class: 'form-control return_check', onchange: 'this.form.submit();' } %>  </td>
                            <td></td>
                        <% else %>
                            <td><%= f.check_box :selected, { checked: false, value: item.selected, class: 'form-control return_check', onchange: 'this.form.submit();' } %> </td>
                            <td></td>
                    <% end %>
                  <% else %>
                        <% if item.selected == true %>
                            <td class="mulitple-item"><%= f.check_box :selected, { checked: true, value: item.selected, class: 'form-control', onchange: 'this.form.submit();' } %></td>
                            <td><%= f.select :quantity, options_for_select((0..item.quantity), selected: 2), {}, { class: 'form-control select-qty' } %></td>

                            <td><%= f.submit "Valider le nombre", class: "btn btn-secondary btn-sm valid_return select-" %></td>
                        <% else %>
                            <td><%= f.check_box :selected, { checked: false, value: item.selected, class: 'form-control return_check', id:"return_check", onchange: 'this.form.submit();' } %></td> 
                            <td></td>
                        <% end %>                           
                    <% end %>   
                <% end %>

            </tr>

        <% end %>
    </tbody>
</table>
<%= link_to "Continuer le retour",  edit_clients_order_returning_path(@order, @returning), class: "btn btn-main btn-block" %>   

У меня есть этот js-скрипт, который отображает тег выбора, если установлен флажок

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

        $('.valid_return').click(function(){
            alert("Are you sure?");

                this.form.submit();

        });

    function checkAll(checktoggle){
        var checkboxes = new Array(); 
        checkboxes = document.getElementsByClassName('return_check');

        checkboxes.forEach(function(boxe){
            boxe.onClick(function(){
                for (var i=0; i<checkboxes.length; i++){
                if (checkboxes[i].type == 'checkbox'){
                    alert(checkboxes[i].parentNode.parentNode.style.display);
                    checkboxes[i].checked = checktoggle;
                };
                };

            });
        });
        }
    });

Как я мог это исправить? Также есть ли у вас предложения по улучшению этой большой формы?

Answer 1

Попробуйте изменить это:

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

к этому:

document.addEventListener('turbolinks:load', function() {
  $(document).on('ready', function() {
    ... your code

Событие turbolinks:load может быть запущено до инициализации jQuery, вы всегда должны посещать это событие в документе, а не через jquery.