I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which updates the table, I am using the JQuery, Ajax, Json, Spring MVC, Here is also one problem when I click on button It repeats the information. So please help me making these two things automatically refreshing Jquery table form database and Button which also refresh information without repeating the information, Thanks in advance for help and any suggestion,
Note: This is working code, thanks to Prog and ChrisH619
<!DOCTYPE html>
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src=".js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src=".1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts-js tbody").empty();
$.get(":8080/HomeServiceProvider/booking/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
$('#fetchContacts').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which updates the table, I am using the JQuery, Ajax, Json, Spring MVC, Here is also one problem when I click on button It repeats the information. So please help me making these two things automatically refreshing Jquery table form database and Button which also refresh information without repeating the information, Thanks in advance for help and any suggestion,
Note: This is working code, thanks to Prog and ChrisH619
<!DOCTYPE html>
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode./svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts-js tbody").empty();
$.get("http://www.service4homes.:8080/HomeServiceProvider/booking/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
$('#fetchContacts').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
-
It looks like you're using datatables, if so it has a method built-in to refresh the AJAX data it's linked to:
$('#table').dataTable()._fnAjaxUpdate();– Rory McCrossan Commented Jan 26, 2015 at 9:50 - I updated code according to Prog and ChrisH619, Its working code. thanks guys for your help.. – Neelabh Singh Commented Jan 26, 2015 at 10:38
3 Answers
Reset to default 4Change your jQuery:
$(".data-contacts-js").append(
to
$(".data-contacts-js tbody").append( /*This nests properly in html*/
and before your
$.each(
remember to remove all the children :)
$(".data-contacts-js tbody").empty();
$.each(
If you then want to use exactly the same code to run (on a refresh, not just a fetch) with an abort:
$(document).ready(function(){
var getDataTimeoutId = null,
refetchTime = 10 /* time in seconds */
isFetching = false,
getData = function(){
if (isFetching) {return;}
if (getDataTimeoutId !== null){
window.clearTimeout(getDataTimeoutId);
getDataTimeoutId = null;
}
isFetching = true;
$.get(
/* ajax get */
).success(function(){
setDataTimeout(); /* Only auto re-get if there wasn't an error */
}).always(function(){
isFetching = false; /* always clear the status */
});
},
setDataTimeout = function(){
getDataTimeoutId = window.setTimeout(function(){
getData();
}, refetchTime * 1000);
};
$('#fetchContacts').click(function(){
getData();
);
setDataTimeout();
});
This means that the code will run every 10s, or a click. But won't hammer the server for multiple pending requests.
:)
Try below code: - Use setInterval
1st Step :
You should create one mon function which will fetch all data form Database as below.
function fetchData(){
$(".data-contacts-js tbody").empty(); // this will remove all <tr>.
$.get("http://localhost:8080/Hotels/reservation/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
Step 2:
Make function which will call function automatically in every 10 sec. using SetInterval as below.
$(document).ready(function(){
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 10 Sec.
});
Step 3:
Make one event function for refresh button click event and put this function in .ready() function.
$('#fetchContacts').click(function() {
fetchData();
});
You could simply use jQuery datatables. This is a fully featured jQuery plugin for tables with huge data sets, which supports things like refreshing in a given time interval. See here
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744349724a4569901.html
评论列表（0条）