Author Topic: Late loading pqgrid.min.js using getScript  (Read 3270 times)

desl

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 2
    • View Profile
Late loading pqgrid.min.js using getScript
« on: January 19, 2018, 05:03:53 pm »
Hi

Currently evaluating the latest version of pqgrid. Using the array.htm example provided in the evaluation download, the provided array.htm works as expected and displays the grid.

If I change the HTML to load the pqgrid.min.js using $.getScript, the load fails as it is failing to parse the code. It fails with the error of "e is undefined", and is located here in the min file. I don't have the dev version of the file, so is difficult to see any context to the variable name.

function(t){t(function(){var n=e.Z,r=e.cssZ,i=n(),o=r();e.isZoom=function(){var t=n(),e=r();return i!=t||o!=e?(i=t,o=e,

e is undefined, where trying to use "cssZ" so the script fails to load and execute the done event on the $.getScript. Note, if the pqgrid.min.js file is loaded using a <script src= tag in the HTML, it works.

Note the $.getScript method of loading the pqgrid.min.js file worked in an earlier version of the js file I trialled.

This is the HTML I'm using:

<!DOCTYPE html>
<html>
<head>
<!--jQuery dependencies-->
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!--PQ Grid files-->
    <link rel="stylesheet" href="pqgrid.min.css" />
    <link rel="stylesheet" href="pqgrid.ui.min.css" />
    <!--office theme-->
    <link rel='stylesheet' href='themes/office/pqgrid.css' />

   
    <!--for localization and intellisense -->
   

<!--jqueryui touch punch for touch devices-->
    <script src="touch-punch/touch-punch.min.js"></script>

<!--jsZip for zip and xlsx import/export-->
    <script src="jsZip-2.5.0/jszip.min.js"></script>

<style>
    *{
        font-size:12px;
        font-family: Arial;
    }
</style>
<script>

$.getScript("pqgrid.min.js").done(function(script, textStatus) {
       
   var data = [
            [1, 'Exxon Mobil', 339938.0, 36130.0],
            [2, 'Wal-Mart Stores', 315654.0, 11231.0],
            [3, 'Royal Dutch Shell', 306731.0, 25311.0],
            [4, 'BP', 267600.0, 22341.0],
            [5, 'General Motors', 192604.0, -10567.0],
            [6, 'Chevron', 189481.0, 14099.0],
            [7, 'DaimlerChrysler', 186106.3, 3536.3],
            [8, 'Toyota Motor', 185805.0, 12119.6],
            [9, 'Ford Motor', 177210.0, 2024.0],
            [10, 'ConocoPhillips', 166683.0, 13529.0],
            [11, 'General Electric', 157153.0, 16353.0],
            [12, 'Total', 152360.7, 15250.0],
            [13, 'ING Group', 138235.3, 8958.9],
            [14, 'Citigroup', 131045.0, 24589.0],
            [15, 'AXA', 129839.2, 5186.5],
            [16, 'Allianz', 121406.0, 5442.4],
            [17, 'Volkswagen', 118376.6, 1391.7],
            [18, 'Fortis', 112351.4, 4896.3],
            [19, 'Crédit Agricole', 110764.6, 7434.3],
            [20, 'American Intl. Group', 108905.0, 10477.0]
        ];

        var obj = {
            numberCell:{resizable:true,title:"#",width:30,minWidth:30},
            editor: {type: 'textbox'},
            title: "ParamQuery Grid with Array data",
            resizable:true,
            scrollModel:{autoFit:true, theme:true}
        };
        obj.colModel = [
            { title: "Rank", width: 100, dataType: "integer" },
            { title: "Company", width: 200, dataType: "string" },
            { title: "Revenues ($ millions)", width: 150, dataType: "float", format: '$#,###.00' },
            { title: "Profits ($ millions)", width: 150, dataType: "float", format: '$#,###.00'}
        ];
        obj.dataModel = { data: data };
        $("#grid_array").pqGrid(obj);

}).fail(function( jqxhr, settings, exception ) {
    console.warn( exception );
});

</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>

</html>


Could you give any advise as to why this is failing. Is there a problem in the js file itself?

Thanks