ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: zhouqi on November 26, 2020, 12:52:23 pm
-
My page contains <base href="./" /> element, and pqgrid header menu cannot be shown correctly: Each click on the header menu icon will trigger all css,js in the page to reload, and occur error.
<html>
<head>
<!-- a bug here -->
<base href="./" />
<link rel="stylesheet" href="jquery-ui.css" />
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="pqgrid.min.js"></script>
</head>
<body>
<div id="grid_json" style="margin:100px;"></div>
<script>
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
{ rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 }
];
var obj = {
numberCell:{resizable:true,title:"#",width:30,minWidth:30},
title: "ParamQuery Grid with JSON Data",
menuIcon: true,
scrollModel:{autoFit:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "Revenues ($ millions)", width: 150, dataType: "float", format: '$#,###.00', dataIndx: "revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", format: '$#,###.00', dataIndx: "profits" }
];
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
</script>
</body>
</html>
-
Mentioned issue / bug is not reproducible.
https://stackblitz.com/edit/paramquery-demo-with-base-tag?file=index.html
Please share a reproducible test case via jsfiddle or stackblitz.
-
I found it is jquery-ui's bug:
_isLocal: ( function() {
var rhash = /#.*$/;
return function( anchor ) {
var anchorUrl, locationUrl;
anchorUrl = anchor.href.replace( rhash, "" );
locationUrl = location.href.replace( rhash, "" );
// Decoding may throw an error if the URL isn't UTF-8 (#9518)
try {
anchorUrl = decodeURIComponent( anchorUrl );
} catch ( error ) {}
try {
locationUrl = decodeURIComponent( locationUrl );
} catch ( error ) {}
return anchor.hash.length > 1 && anchorUrl === locationUrl;
};
} )()
The bug in this method:
_isLocal: ( function() {
var rhash = /#.*$/;
return function( anchor ) {
var anchorUrl, locationUrl;
//Bug here:
//eg visit url: http://127.0.0.1:5500/pqgrid.html
//If no <base href="">, anchor.href = http://127.0.0.1:5500/pqgrid.html#xxx, and anchorUrl=http://127.0.0.1:5500/pqgrid.html
//If exists <base href="./">, anchor.href = http://127.0.0.1:5500/#xxx, and anchorUrl=http://127.0.0.1:5500/
//
anchorUrl = anchor.href.replace( rhash, "" );
locationUrl = location.href.replace( rhash, "" );
// Decoding may throw an error if the URL isn't UTF-8 (#9518)
try {
anchorUrl = decodeURIComponent( anchorUrl );
} catch ( error ) {}
try {
locationUrl = decodeURIComponent( locationUrl );
} catch ( error ) {}
//So, if exists <base href="">, anchorUrl != locationUrl, and it's not a local, this is the bug!!!
return anchor.hash.length > 1 && anchorUrl === locationUrl;
};
} )()