Блог

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

 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;
                };
                };

            });
        });
        }
    });
  

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

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

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

к этому:

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

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