'Javascript code not worked in Internet Explorer but working on chrome and firefox

I have 2 files index.jsp and index.js

index.jsp file as below

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
   language="java"%>
<%@taglib prefix="s" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>My Project</title>
      <!-- DataTables JavaScript -->    
      <script src="/js-datatables/datatables.js"></script>
   </head>
   <body>
         <div id="page-wrapper">
            <div class="container-fluid" style="margin-top:1%;">
               <div class="col-lg-12" style="padding:0px;">
                  <table id="statusTable" class="table" style="width:100%"></table>
               </div>
            </div>
           <script>
               var statusDetailsRequestLink = 'details';
               
               function loadStatusDetails(tableId) {
               var xhttp = new XMLHttpRequest();
               xhttp.onreadystatechange = function() {
                   if (this.readyState == 4 && this.status == 200) {
                       var result = JSON.parse(this.responseText);
                       initializeStatusTable(result, tableId);
                   }
               }
               xhttp.open("GET", "./" + statusDetailsRequestLink, true);
               xhttp.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0,max-stale=0");
               xhttp.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT");
               xhttp.setRequestHeader("Pragma", "no-cache");
               xhttp.send();
               }
               
              function initializeStatusTable(data, tableId) {
                var table = $('#' + tableId).DataTable({
                    // Created a DataTables on frontend
                });
                }              
              loadStatusDetails('statusTable');
            </script>
         </div>
      <script src="/js/index.js"></script>
   </body>
</html>

If i move code to the index.js file index.js file is below

var statusDetailsRequestLink = 'details';
               
function loadStatusDetails(tableId) {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
           var result = JSON.parse(this.responseText);
           initializeStatusTable(result, tableId);
       }
}
   xhttp.open("GET", "./" + statusDetailsRequestLink, true);
   xhttp.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0,max-stale=0");
   xhttp.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT");
   xhttp.setRequestHeader("Pragma", "no-cache");
   xhttp.send();
}
   
function initializeStatusTable(data, tableId) {
    var table = $('#' + tableId).DataTable({
        // Created a DataTables on frontend
    });
}              
loadStatusDetails('statusTable');

And called by the onload from body


<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
   language="java"%>
<%@ page import="javax.servlet.jsp.PageContext"%>
<%@taglib prefix="s" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>My Project</title>
      <!-- DataTables JavaScript -->    
      <script src="/js-datatables/datatables.js"></script>
   </head>
   <body onload="loadStatusData()">
         <div id="page-wrapper">
            <div class="container-fluid">
            </div>
            <div class="container-fluid" style="margin-top:1%;">
               <div class="col-lg-12" style="padding:0px;">
                  <table id="statusTable" class="table" style="width:100%"></table>
               </div>
            </div>
           
         </div>
      <script src="/js/index.js"></script>
   </body>
</html>

The above code is show data on JSP page

The code is working fine in Chrome and Firefox but not working in IE. I have changed also settting related scripting in Developer tools

javascript internet-explorer

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Javascript code not worked in Internet Explorer but working on chrome and firefox

Sources

Related Questions