In my jsp page.. I am displaying table dynamically using jquery. Everything is fine but now the image/text used to show until page ready is not getting hidden even after I displayed table. What's the problem?/
Here is my code:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DbRefresh Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var url="/DbRefresh/FetchRecords";
$(document).ready(function(){
$('#loading').hide();
//$.ajaxSetup({cache:false});
setInterval(callUrl,15000);
function callUrl()
{
//alert("Called");
$.ajax({
url:'/DbRefresh/FetchRecords',
type:'post',
dataType: 'json',
cache: false,
contentType: 'application/json',
success: function(data) {
$("tr td").remove();
$.each(data.obj,function(index,obj)
{
$("#table").append('<tr><td>'+obj.name+'</td><td>'+obj.age+'</td></tr>');
})
//$("tr td").replacewith(tabdata);
}
});
}
});
</script>
<style type="text/css">
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
</style>
</head>
<body>
<div id="table">
<table border='4' cellpadding='6' cellspacing='3' width='300px'>
<thead><tr bgcolor='66FF00'><th>Name</th><th>Age</th></tr></thead>
</table>
</div>
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</body>
</html></div>
