[QA] parameter grid pro 9.1.1 : set background lazy loading after pq.grid

[unbinara]

is there any way to set lazy loading like below code

<below code : occur error>
Uncaught TypeError: Cannot read properties of undefined (reading 'init')
    at A.refreshDataAndView (pqgrid.min.js:9:66261)
    at doSearch (sample03.js:83:10)
    at HTMLDocument.<anonymous> (sample03.js:5:5)
    at j (jquery.min.js:2:29999)
    at k (jquery.min.js:2:30313)

############################################

var grid;
$(document).ready(function() {
    initGrid();
    doSearch();

});

function initGrid() {
    var obj = {           
        numberCell: { width: 60 },
        title: "Background loading of data",
        resizable: true,     
        pageModel: { rPP: 150 },   
        colModel: [
            { dataIndx: 'athlete', title: 'Athlete' },
            { dataIndx: 'age', dataType: 'integer', title: 'Age'  },
            { dataIndx: 'country', title: 'Country' },
            { dataIndx: 'year', dataType: 'integer', title: 'Year'  },
            { dataIndx: 'date', dataType: 'date', title: 'Date' },
            { dataIndx: 'sport', title: 'Sport' },
            { dataIndx: 'gold', dataType: 'integer', title: 'Gold' },
            { dataIndx: 'silver', dataType: 'integer', title: 'Silver'  },
            { dataIndx: 'bronze', dataType: 'integer', title: 'Bronze'  },
            { dataIndx: 'total', dataType: 'integer', title: 'Total'  }
        ]
    };

    grid = pq.grid("#pqgrid", obj);
}

function doSearch() {
   
    grid.option( {dataModel : {location:"lazy", data:[], url:"https://paramquery.com/pro/Olympics"}} );
    grid.option( {pageModel : { rPP: 150 }} );
    grid.refreshDataAndView();

}

[paramvir]

dataModel.location = 'lazy' needs to be declared upfront and dataModel should be copied before setting its new properties.

Code: [Select]

var grid;
function initGrid() {
var obj = {           
numberCell: { width: 60 },
title: "Background loading of data",
resizable: true,     
pageModel: { rPP: 150 },   
dataModel: {location: 'lazy'}, //declare upfront.
colModel: [
{ dataIndx: 'athlete', title: 'Athlete' },
{ dataIndx: 'age', dataType: 'integer', title: 'Age'  },
{ dataIndx: 'country', title: 'Country' },
{ dataIndx: 'year', dataType: 'integer', title: 'Year'  },
{ dataIndx: 'date', dataType: 'date', title: 'Date' },
{ dataIndx: 'sport', title: 'Sport' },
{ dataIndx: 'gold', dataType: 'integer', title: 'Gold' },
{ dataIndx: 'silver', dataType: 'integer', title: 'Silver'  },
{ dataIndx: 'bronze', dataType: 'integer', title: 'Bronze'  },
{ dataIndx: 'total', dataType: 'integer', title: 'Total'  }
]
};
grid = pq.grid("#pqgrid", obj);
}

function doSearch() {

   var DM = grid.option('dataModel');
DM.data = [];
DM.url = "https://paramquery.com/pro/Olympics"
grid.option( {dataModel: DM} );
grid.option( "pageModel.rPP", 150 );
grid.refreshDataAndView();

}


[unbinara]

it works greatly..thanks a lot!

but there is one error in chrome browser(f12)
will be problem?..

<error detail>
pqgrid.min.js:9 Uncaught Error : SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

error @ pqgrid.min.js:9
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
(anonymous) @ jquery.min.js:4
load (async)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
A.callXHR @ pqgrid.min.js:9
request @ pqgrid.min.js:9
init @ pqgrid.min.js:9
A.refreshDataAndView @ pqgrid.min.js:9
_create @ pqgrid.min.js:9
(anonymous) @ jquery-ui.min.js:6
_createWidget @ jquery-ui.min.js:6
e._createWidget @ pqgrid.min.js:9
(anonymous) @ jquery-ui.min.js:6
t.<computed>.<computed> @ jquery-ui.min.js:6
(anonymous) @ jquery-ui.min.js:6
each @ jquery.min.js:2
each @ jquery.min.js:2
t.fn.<computed> @ jquery-ui.min.js:6
ComPqGrid.setGrid @ pqGrid.eagle.js:137
initGrid @ sample03.js:44
(anonymous) @ sample03.js:4
j @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
S @ jquery.min.js:3

[paramvir]

It looks like invalid JSON returned by your remote server. Please check the response of the remote server.

[unbinara]

1. firstly, I am not request server ,  i just call https://paramquery.com/pro/Olympics
2. i find out the reason about this

dataModel: {location: 'lazy'}, //declare upfront.

if does not use url in initGrid function,
pqgrid call ajax like
http://localhost/sample03.html?pq_curpage=1&pq_rpp=1000&_=1710905950673s

so, as you say, response not json and response sample03.html

but, work well except this.