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脚本，如果选中了checkboxe，则会显示select标记

$(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。

除非我重新加载，否则无法提交表格

1 个答案: