jQuery working in IE, but not in Chrome/Edge

Question

I've been trying to fix this bug for more than 10 hours, but I just can't figure out how to fix it.

When using Internet Explorer 11, I don't get this bug, when using Edge or Chrome I get it. If I clear the history and cache the error doesn't appear the first time the page loads. But if I open the page again, the error appears.

Line 94 points to this:

$("#" + divname + "no").html(" [" + $("#" + divname).jqGrid('getGridParam', 'records') + "]");

which is inside a loadGrid function:

function loadGrid(listname, query, divname, colnames, colmdodel,showSubGrid,subGridFunction) {

    $("#" + divname).jqGrid({
        datatype: function () { loadGridData(listname, query, divname); },
        colNames: colnames,
        colModel: colmdodel,
        subGrid: showSubGrid,
        subGridRowExpanded: subGridFunction,
        height: "100%",
        loadonce: true,
        rowNum: 9999,
        gridComplete: function () {

            $("#" + divname + "no").html(" [" + $("#" + divname).jqGrid('getGridParam', 'records') + "]");
            //if (divname == "gridmy") { updatePositionCols(); }

            $("#" + divname).jqGrid('setGridParam', { datatype: 'local' });

        },
        ondblClickRow: function (rowid, iRow, iCol, e) {
            //onDoubleClickGrid(rowid, iRow, iCol, e, divname, listname);
        }
    });

    $("#" + divname).jqGrid('filterToolbar', {
        autosearch: true,
        stringResult: false,
        searchOnEnter: true,
        defaultSearch: "cn",
    });

    $("#" + divname + "action").height("40px");
    $("#" + divname + "action").html("<button style=\" font: bold 12px/1 'Segoe UI','Segoe',Tahoma,Helvetica,Arial,sans-serif;\"  type=\"button\" class=\"skip\" onclick=\"exportToExcel('" + divname + "');\">" + imgExcel + "&nbsp;Export To Excel</button>");
}

On the internet there were a lot of suggestions to check how jQuery is used.

On SharePoint I have a Content Editor on the page where I have this inside:

<div class="ms-rtestate-read ms-rte-embedcode ms-rte-embedil ms-rtestate-notify" contenteditable="false">
   <script type="text/javascript" src="/tools/scripts/apps/cpc.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/i18n/grid.locale-de.min.js" integrity="sha256-RjiiXuat7O4vsxiSYStIKXNPPY/VBgHPVtpfm6d5vqw=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqGrid.min.js" integrity="sha256-FnArI+EzP1sml6lP7y0hYGQ6TltZA5+FfqpRBRUnMOE=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="/tools/scripts/apps/3rdParties/startPage3rdParties.js" unselectable="on"></script>
   <script type="text/javascript" src="/tools/scripts/tools/jqgrid/js/jszip.min.js"></script>
   <script type="text/javascript" src="/tools/Scripts/tools/date.js" unselectable="on"></script><script type="text/javascript" src="/tools/Scripts/tools/jquerymap/dist/jquery.vmap.min.js"></script> 
   <script type="text/javascript" src="/tools/Scripts/tools/jquerymap/dist/maps/jquery.vmap.world.js"></script> 
   <script type="text/javascript" src="/tools/scripts/apps/3rdParties/gridhandling.js"></script> 
   <link href="/tools/scripts/apps/3rdParties/custom.css" rel="stylesheet"/> 
   <link href="/tools/Scripts/tools/jquerymap/dist/jqvmap.css" rel="stylesheet"/></div>
<p>
   <br/>
</p>

I've tried a lot of combinations to check if it's related to the order, but the error still appears. Used newer versions of jQuery, used the non-compressed versions etc. all without success.

This is what it looks like when it works (on Microsoft Edge):

This is what it looks like when it doesn't work:

In the code I tried using

var jQ = jQuery.noConflict(true);

and then replaced every $ - but still no fix.

When I delete the cache the site works only once and $.fn.jqGrid is also defined on the console:

When opening the site on a new tab the console tells that $.fn.jqGrid is undefined.

I'm using SharePoint (if that's relevant).

Any kind of tip/help is highly appreciated!

Answer 1

Wrapping the codepart that didn't work like this solved the problem:

$.getScript("/tools/scripts/tools/jqgrid/js/jquery.jqGrid_5_3_0.min.js", function () {
     $("#" + divname + "no").html(" [" + $("#" + divname).jqGrid('getGridParam', 'records') + "]");
});

Answer 2

$(document).ready(function(){
    ...
    ...
    $.getScript("largejs.js");
});