Author Topic: Bug: if page contains <base href="..." /> element, the header menu show error  (Read 189 times)

zhouqi

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 9
    • View Profile
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.
Code: [Select]
<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>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 4960
    • View Profile
[ Only Pro members may read this post. ]

zhouqi

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 9
    • View Profile
I found it is jquery-ui's bug:
Code: [Select]
_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;
   };
} )()