Hi,
I have attached a .html document and a text file, which is used as a input.
This is a very basic website and its working fine in mozilla and chrome but not working on IE.
Whenever a refresh button is clicked it loads data in debug area and Generate button is clicked to display the contents in the page.
In IE nothing is getting loaded in Debug area.
Following is the code and input file is uploaded.
Any help will be highly appreciated!!
<html>
<head>
<style>
/* CSS Document */
body
{
/** background-image: url(../images/GrayStripe.jpg); commented temporarily ***/
background-color:AntiqueWhite
margin : 0;
margin-top: 0px;
}
#WholeContentDiv
{
margin: 0px 0px 0px 0px; /**** changed by balki *******/
background-color: #fff;
border: 5px solid #ddd;
border-left: none; /***** added by balki *******/
border-right: none; /***** added by balki *******/
padding: 20px;
border-radius: 4px;
box-shadow: 0px 0px 4px #aaa, 0px 0px 100px rgba(0, 0, 0, 0.1) inset;
overflow-y: auto;
height: 600px;
}
#MainTitleDiv
{
font: 54px Impact;
text-align: right;
margin: 20px;
/** color: #bbb; **/
color: BLACK;
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #ddd;
}
.Title{
font-family: 'Trebuchet MS', 'Lucida Grande',Verdana, Lucida, Geneva, Helvetica,Arial, sans-serif;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 5 5 0 5;
cursor: pointer;
color: BLACK;
text-shadow: 1px 1px 2px #aaa, -1px -1px 2px #ddd;
}
#statusbar{
min-height: 60px;
/**** position: absolute; removed by balki *******/
/* top: 30px; */
/*** padding: 10px; removed by balki****/
/* left: 25%; */
/*** background-color: black; ***/
border: 1px solid #ddd;
border-radius: 1px;
box-shadow: 0px 0px 3px #ccc;
/*** display: none; removed by balki *****/
width: 100%;
font-family: 'Trebuchet MS', 'Lucida Grande',Verdana, Lucida, Geneva, Helvetica,Arial, sans-serif;
font-size : 14px;
z-index: 100;
}
.objecttype {
width: 100%;
/* border-right: 1px solid #000; */
padding: 0 0 0 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',Verdana, Lucida, Geneva, Helvetica,Arial, sans-serif;
font-size: 11px;
color: BLACK;
}
.objecttype .server{
background-color: #F2F2F2;
}
.objecttype .database{
background-color: #E6E0EC;
}
.objecttype .tablespace{
background-color: #C6D9F1;
}
.objecttype .diskspace{
background-color: #DDD9C3;
}
.objecttype .cpu{
background-color: #F2F2F2;
}
.objecttype .memory{
background-color: #E6E0EC;
}
.objecttype .agent{
background-color: #C6D9F1;
}
.objecttype .asm{
background-color: #DDD9C3;
}
.objecttype .server, .objecttype .database, .objecttype .tablespace, .objecttype .diskspace, .objecttype .cpu, .objecttype .memory, .objecttype .agent, .objecttype .asm
,.objecttype .archive
{
/* padding: 10px 20px 20px 20px; removed by balki */
/* margin: 20px 0px; removed by balki*/
/* border: 2px solid #ccc; removed by balki*/
box-shadow: 0px 0px 5px #ddd, 0px 0px 50px rgba(0,0,0,0.08) inset;
position: relative;
overflow: hidden;
}
ul {
margin: 0;
padding: 5 10 10 10;
/** margin-top: 15px; removed by balki**/
border: none;
list-style: none;
}
.object li {
/*** border-bottom: 1px solid #90bade; removed by balki***/
padding-left: 1px; /**** added by balki ****/
margin: 2px;
margin-right: 10px;
margin-bottom: 5px;
margin-top: 5px;
list-style: none;
display: inline-block;
box-shadow: 0px 0px 8px #888;
}
.object li:before{
color: #fff;
background-color:#508fc4;
padding: 0px 5px 0px 5px;
content: "U";
/** border: 1px solid #fff;
border-left: none; removed by balki ***/
/*** box-shadow: 0px 0px 2px #888; removed by balki ***/
}
.object li[errortype=A]:before {
content: "A";
background-color:#508fc4;
}
.object li[errortype=B]:before {
content: "B";
background-color:#508fc4;
}
.object li[errortype=C]:before {
content: "C";
background-color:#508fc4;
}
.object li[errortype=D]:before {
content: "D";
background-color:#508fc4;
}
.object li[errortype=E]:before {
content: "E";
background-color:#508fc4;
}
.object li[errortype=F]:before {
content: "F";
background-color:#508fc4;
}
.object li[errortype=G]:before {
content: "G";
background-color:#508fc4;
}
.object li[errortype=H]:before {
content: "H";
background-color:#508fc4;
}
.object li[errortype=I]:before {
content: "I";
background-color:#508fc4;
}
.object li a {
/** padding: 5px 10px; changed by balki **/
padding: 0px 10px;
/** border: 1px solid #fff; removed by balki**/
/** border-right: 20px solid #508fc4; **/
/** background-color: #2175bc;
color: #fff; Changed by balki**/
/** added color: #2175bc; by balki**/
color: #555; /* added by balki ****/
text-decoration: none;
width: 100%;
/** box-shadow: 0px 0px 8px #888; *** balki moved to li *******/
}
.object li span{
display: none;
}
html>body .object li a {
width: auto;
}
.object li a:hover {
/* border-left: 3px solid #1c64d1;
border-right: 20px solid #5ba3e0; **/
background-color: #555; /*** changed by balki ****/
color: #fff;
}
.debug {
display:none;
}
</style>
<script>
/*********GLOBALS*****************/
var errorpat=/[A-H]/;
/*********GLOBALS*****************/
/*************** ajax functions *************************/
function getHTTPObject(){
if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function ajaxcall(URL1,outdiv,type){
var httpObjectTableData = getHTTPObject();
//alert(URL1+outdiv);
if (httpObjectTableData != null) {
httpObjectTableData.open("GET",URL1,true);
httpObjectTableData.send(null);
httpObjectTableData.onreadystatechange = function(){
if(httpObjectTableData.readyState == 4){
sresponseTableInfo = httpObjectTableData.responseText;
if(type==1)
$(outdiv).value= sresponseTableInfo;
else
$(outdiv).innerHTML= sresponseTableInfo;
}
}
}
}
/***************ajax functions end*******************/
function init(){
x=document.getElementsByTagName("li");
for(i=0;i<x.length;i++){
x[i].addEventListener("mouseover",showstatus);
x[i].addEventListener("mouseout",nullstatus);
}
}
function showstatus(){
//ADD CODE TO get the error status associated with the server and set status bar//
$("statusbar").innerHTML=this.getElementsByTagName("span")[0].innerHTML;
}
function nullstatus(){
$("statusbar").innerHTML="";
}
function $(x){
return document.getElementById(x);
}
function ConstructIH(x){
li_txt="";
errortype="U";
//alert(x);
y=x.split("~");
//tgt="ul_"+y[0].replace(/[^a-zA-Z0-9]/,"");
tgt="ul_"+y[0].replace(/[\t\r\n ]/,"");
//alert(tgt);
//Ignoring the first element as it is the object type field
for(var i=1;i<y.length;i++)
{
if(y[i].length!=0)
{
// alert("Inside"+y[i]);
z=y[i].split(":");
if(errorpat.test(z[1]))
errortype=z[1];
li_txt=li_txt+"<li errortype='"+errortype+"'><a href='#'>"+z[0]+"</a><span>"+z[2]+"</span></li>";
}
}
//alert(li_txt);
$(tgt).innerHTML+=li_txt;
}
function clearobjects(){
$('ul_server').innerHTML="";
$('ul_database').innerHTML="";
$('ul_tablespace').innerHTML="";
$('ul_diskspace').innerHTML="";
$('ul_cpu').innerHTML="";
$('ul_memory').innerHTML="";
$('ul_agent').innerHTML="";
$('ul_asm').innerHTML="";
}
function Generate(x){
clearobjects();
//alert(x);
p=x.split(";")
//alert(p.length);
for(var i=0;i<p.length;i++)
{
if(p[i].length!=0)
ConstructIH(p[i]);
}
init();
}
</script>
</head>
<body onload="init();">
<div id=statusbar>
This is where the details would appear.
</div>
<div id="WholeContentDiv">
<div class="objecttype">
<div class="object server">
<span class="Title">
SERVER
</span>
<ul id="ul_server">
</ul>
</div>
<div class="object database">
<span class="Title">
DATABASE
</span>
<ul id="ul_database">
</ul>
</div>
<div class="object tablespace">
<span class="Title">
TABLESPACE
</span>
<ul id="ul_tablespace">
</ul>
</div>
<div class="object diskspace">
<span class="Title">
DISKSPACE
</span>
<ul id="ul_diskspace">
</ul>
</div>
<div class="object cpu">
<span class="Title">
CPU
</span>
<ul id="ul_cpu">
</ul>
</div>
<div class="object memory">
<span class="Title">
MEMORY
</span>
<ul id="ul_memory">
</ul>
</div>
<div class="object agent">
<span class="Title">
AGENT
</span>
<ul id="ul_agent">
</ul>
</div>
<div class="object asm">
<span class="Title">
ASM
</span>
<ul id="ul_asm">
</ul>
</div>
</div>
</div>
<div class="debug1">
<span class="Title">
Debug Region
</span>
<br>
<textarea id="debugtext" COLS=40>
</textarea>
<a href="javascript:Generate($('debugtext').value);">Generate</a>
<a href="javascript:ajaxcall('AlertInfo.txt','debugtext',1);">Refresh</a>
</div>
</body>
</html>
Thanks in advance!!