I am getting critical issue while working on JQuery.
Do $(this).dialog('close'); removes content which is being bind to display? If yes then how can I prevent this.
Below is my code.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function cool_function(event){
//alert(event.data.param1);
alert($('#'+event.data.param2).html());
//var dialog = $('#'+event.data.param2).children('#content').html();
$('#'+event.data.param2).children('#content').dialog({
model : true,
autoOpen: true,
buttons: {
"Save": function() {
alert('Content Will be Saved');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
$('#'+event.data.param2).children('#content').dialog('open');
}
</script>
</head>
<body>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>johndoe1</td>
<td class="click" id="clickTest1">
<script>
$("#clickTest1").click({param1: "Hello Darshak", param2: "clickTest1"}, cool_function);
</script>
<div>
<img id='' src="gray.jpg"/>
</div>
<div id='content' title='John Doe' style="display:none;">
<div><textarea>Hello this is Text Area</textarea></div>
</div>
</td>
</tr>
<tr>
<td>Ketan B</td>
<td>ketan.b#example.com</td>
<td>ket1</td>
<td class="click" id="clickTest2">
<script>
$("#clickTest2").click({param1: "Hello Ketan", param2: "clickTest2"}, cool_function);
</script>
<div>
<img id='' src="gray.jpg"/>
</div>
<div id='content' title='Ketan B' style="display:none;">
<div><textarea>One more text area Hurrey!!!</textarea></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Now issue is, Check the alert in code when I load page first time. alert will give me whole div code including the content id code.
Once the content displayed on dialog bar, I close or cancel that dialog then try to click the same first row again and it doesn't have content div at all and I could not get dialog again.
Below is screen shot to understand it better.
Dialog box 1
Dialog display only first time when I click on comment image
Update - Answer
I got my answer. Here are the changes in same.
Column change is like this,
<td class="click" id="clickTest2">
<script>
$("#clickTest2").click({param1: "content2", param2: "One more text area Hurrey!!!"}, cool_function);
</script>
<div>
<img id='' src="file://c://gray.jpg"/>
</div>
<div id='content2' title='Ketan B' style="display:none;">
<div><textarea>One more text area Hurrey!!!</textarea></div>
</div>
and Script change is like this,
function cool_function(event){
$('#'+event.data.param1).dialog({
model : true,
buttons: {
"Save": function() {
alert('Content Will be Saved');
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
}
Okay, so i have gone through the whole code that you had provided, and it was way too much complex.. too many recursive calls. So i made the code a little simple and instead of calling the modal recursively (which in fact leads to the un binding of the content from the dialog), i segregated stuff like this :
HTML:
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>johndoe1</td>
<td class="click" id="clickTest1">
<div>
<img id='' src="http://www.eventbelladesigns.com/sitebuildercontent/sitebuilderpictures/gray.jpg"/>
</div>
<div id='content1' title='John Doe' style="display:none;">
<div><textarea>Hello this is Text Area</textarea></div>
</div>
</td>
</tr>
<tr>
<td>Ketan B</td>
<td>ketan.b#example.com</td>
<td>ket1</td>
<td class="click" id="clickTest2">
<div>
<img id='' src="http://www.eventbelladesigns.com/sitebuildercontent/sitebuilderpictures/gray.jpg"/>
</div>
<div id='content2' title='Ketan B' style="display:none;">
<div><textarea>One more text area Hurrey!!!</textarea></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS:
$("#clickTest1").on('click', callModal1);
$("#clickTest2").on('click', callModal2);
function callModal1(){
$(function() {
$( "#content1" ).dialog(({
buttons: [
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
}));
});
}
function callModal2(){
$(function() {
$( "#content2" ).dialog(({
buttons: [
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
}));
});
}
Here, once the call happens , the modal/dialog will open, but once you close the dialog by clicking on the close icon or the cancel button, the content will not be un loaded and the dialogues will still appear during subsequent clicks.
I have binned it out for you, you can see the working solution at : http://jsbin.com/oxucak/1/edit. And remember to run with js.
Related
I do have some problems on how will I implement a pop-up on a link. I'm currently using Spring-boot with Thymeleaf
I'm planning to implement the pop up window upon pressing the "Edit" button. Currently it shows on a new tab.
Here's the HTML:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
<div class="d-flex" id="wrapper">
<div th:insert="template::sidebar">
</div>
<div id="page-content-wrapper">
<nav th:insert="template::navbar">
</nav>
<div class="container-fluid">
<h1> Employee List </h1>
Add new Employee<br/><br/>
<table border="1" cellpadding="10">
<thead>
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Credentials </th>
<th> Department </th>
<th> Image </th>
<th> Image filename </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr th:each="employee: ${employees}">
<td th:text="${employee.name}"></td>
<td th:text="${employee.designation}"></td>
<td th:text="${employee.credentials}"></td>
<td th:text="${employee.departmentName == null} ? 'Empty' : ${employee.departmentName}"></td>
<td><img th:src="#{'/uploads/' + ${employee.image_fn}}"/></td>
<td th:text="${employee.image_fn}"></td>
<td>
<a th:href="#{'/admin/employees/edit/' + ${employee.name}}" th:target="_blank"><button type="button" class="btn btn-primary">Edit</button></a> <!--Edit Button must launch a pop up window, but is currently launching only on new tab-->
<!-- -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#empDeleteConfirm">Delete</button>
<a th:href="#{'/admin/employees/imageUpload/' + ${employee.name}}">Upload Image</a>
</td>
<div class="modal fade" id="empDeleteConfirm" tabindex="-1" role="dialog" aria-labelledby="empDeleteConfirm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="empDeleteConfirm">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you want to delete this employee?
</div>
<div class="modal-footer">
<a th:href="#{'/admin/employees/delete/' + ${employee.name}}"><button type="button" class="btn btn-primary">Delete</button></a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
</table>
<!-- Modal -->
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/bootstrap.js}"></script>
</body>
</html>
Here's the window to be shown on a pop up window:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- <div th:insert="template::sidebar">
</div> -->
<div id="page-content-wrapper">
<!-- <nav th:insert="template::navbar">
</nav> -->
<div class="container-fluid" align="center">
<h1> Edit Employee </h1>
<form action="#" th:action="#{/admin/employees/update}" th:object="${employee}" method="post" th:fragment="empEdit">
<table border="0" cellpadding="10">
<td><input type="hidden" th:field="*{name}"/></td>
<td><input type="hidden" th:field="*{image_fn}"/></td>
<tr>
<td> Designation: </td>
<td><input type="text" th:field="*{designation}"/></td>
</tr>
<tr>
<td> Credentials: </td>
<td><input type="text" th:field="*{credentials}"/></td>
</tr>
<tr>
<select th:field="*{department}">
<option th:each="department: ${departments}" th:value="${department.name}" th:text="${department.description}"></option>
</select>
</tr>
<tr>
<td><button type="submit">Save</button></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/bootstrap.js}"></script>
</body>
</html>
Using these controller:
import com.ppt.contentmanagementsystem.dao.DepartmentDAO;
import com.ppt.contentmanagementsystem.dao.EmployeeDAO;
import com.ppt.contentmanagementsystem.model.Department;
import com.ppt.contentmanagementsystem.model.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.List;
import java.util.Optional;
#Controller
public class EmployeeVC {
#Autowired
EmployeeDAO employeeDAO;
#Autowired
DepartmentDAO departmentDAO;
#GetMapping("/admin/employees")
public String employeesHomePage(Model model){
List<Employee> employees = employeeDAO.getAllEmployees();
model.addAttribute("employees", employees);
model.addAttribute("title", "Employees");
return "employeeHome";
}
#GetMapping("/admin/employees/new")
public String newEmployeePage(Model model){
Employee employee = new Employee();
List<Department> departments = departmentDAO.getAllDepartments();
model.addAttribute("employee", employee);
model.addAttribute("departments", departments);
return "employeeNew";
}
#PostMapping("/admin/employees/new")
public String addEmployeePage(#ModelAttribute("employee") Employee employee){
employeeDAO.addEmployee(employee);
return "redirect:/admin/employees";
}
#GetMapping("/admin/employees/edit/{id}")
public String editEmployeePage(Model model, #PathVariable String id){
Optional<Employee> eopt = employeeDAO.getEmployee(id);
Employee employee = eopt.get();
List<Department> departments = departmentDAO.getAllDepartments();
model.addAttribute("employee", employee);
model.addAttribute("departments", departments);
model.addAttribute("title", "Employee Edit");
return "employeeEdit";
}
#GetMapping("/admin/employees/imageUpload/{id}")
public String uploadEmployeeImagePage(Model model, #PathVariable String id){
Optional<Employee> eopt = employeeDAO.getEmployee(id);
Employee employee = eopt.get();
model.addAttribute("employee", employee);
model.addAttribute("title", "Employee Image");
return "employeeImage";
}
#PostMapping("/admin/employees/imageUpload")
public String updateEmployeeImage(#ModelAttribute("employee") Employee employee, #RequestParam("imageFile") MultipartFile imageFile) throws IOException{
employeeDAO.saveEmployeeImage(employee, imageFile);
return "redirect:/admin/employees";
}
#PostMapping("/admin/employees/update")
public String updateEmployeePage(#ModelAttribute("employee") Employee employee){
employeeDAO.updateEmployee(employee);
return "redirect:/admin/employees";
}
#GetMapping("/admin/employees/delete/{id}")
public String deleteEmployeePage(#PathVariable String id){
employeeDAO.deleteEmployee(id);
return "redirect:/admin/employees";
}
}
For modal window you should add the JavaScript code to your template as described here
Thymeleaf documentation 13.4 Textual parser-level comment blocks: removing code
Simple implementation of the modal window in js is:
<!DOCTYPE html>
<html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0; top: 0; width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0,0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() { modal.style.display = "block"; }
// When the user clicks on <span> (x), close the modal
span.onclick = function() { modal.style.display = "none"; }
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
} }
</script>
</body> </html>
I've found a textual solution here: Spring MVC: Open link in new browser window in handler method
And a tutorial explaining Javascripts window.open function
https://www.youtube.com/watch?v=G83c-ZqZ7pk
Answering the question on how to open a new browser-window (popup) when clicked on an element or link.
I am fetching username and password from semnatic ui modal login form (home.jsp) in servlet. Servlet will verify the credentials and return result to home.jsp the error should be displayed in the same modal. The error message is not displayed in first run in the modal it gets displayed when I again click on login button which opens this modal. I want this error message in first run. Please suggest how to achieve this. Below is the complete code.
FileBug.java (Servlet)
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Bugzilla bugzilla=Bugzilla.getBugzillaInstance("username", "pass");
try {
//some code
}catch(Exception e)
{
request.setAttribute("errorMessage",e.getMessage());
RequestDispatcher dispatcher = request.getRequestDispatcher("/home.jsp");
dispatcher.forward(request, response);
}
}
home.jsp
<a class="item agenda-item" id="test">
<span class="side-agenda-item"> <i class="bug icon"></i> File a Bug</span>
<div class="ui modal test">
<form action="FileBug" method="post">
<div class="ui segments">
<br>
<h3 align="center" class="header">Bugzilla Login</h3>
<div class="ui container">
<c:if test="${not empty errorMessage}">
<c:out value="${errorMessage}"/>
</c:if>
</div>
<div class="ui segment">
<div class="ui input">
<input type="text" name="username" placeholder="Bugzilla Username" required>
</div>
</div>
<div class="ui segment">
<div class="ui input">
<input type="password" name="password" placeholder="Bugzilla Password" required>
</div>
</div>
<div class="ui segment">
<br>
<button class="ui blue button" id="login">Login</button>
<br><br>
</div>
</div>
</form>
</div>
</a>
script:-
<script>
$(function(){
$("#test").click(function(){
$(".test").modal('show');
});
$(".test").modal({
closable: true
});
});
</script>
<style>
div.ui.modal{
width: 20%;
top: 45%;
left: 75%;
}
div.ui.input {
width: 100%;
}
button#login{
margin: -20px -50px;
position:relative;
top:50%;
left:53%;
}
div.ui.input input {
display: block;
margin: 0 auto !important;
float: none;
}
</style>
The error message is not displayed in first run in the modal it gets
displayed when I again click on login button which opens this modal.
Because in the first run, your errorMessage variable is not set. Only after you submit the form is the errorMessage variable not empty.
If you want to view errorMessage on the first run, then you need to set it before accessing home.jsp
Can anyone guide me how can i call a jsp/html page using ajax in play framework?
I want to open a lightbox on click of a button and want to load that with a page containing data from database.
Currently i have just displayed the message using ajax. Below is the method inApplication.java
public static Result index()
{
return ok(index.render("Your new application is ready."));
}
My index.scala.html is:
#(products: List[Products])
#import helper._
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<h1>#products.size() product(s)</h1>
<table border=1>
<tr>
<td>Product Name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
#for(product <- products) {
<tr>
<td>
#product.productname
</td>
<td>
#product.quantity
</td>
<td>
#product.price
</td>
<td id="items">
<input type="button" value="Add Product" name="#routes.Application.user(product.product_id)" id="but"/>
</td>
</tr>
}
</table>
<div class="result1" style="border: 1px solid black; padding: 5px;">not sent yet...</div>
<script type="text/javascript">
jQuery("#items a").click(
function () {
$.get(jQuery(this).attr("href"), function (data) {
$('.result').html(data);
});
return false;
}
)
</script>
You are on the good way.
Create a new action which will return only the html you need in your div (and not the complete html page).
public static Result detail(Integer productId)
{
Product product = .... (productId);
return ok(productDetail.render(product));
}
// with the route of course
productDetail.scala.html
#(product: Product)
My product #product.product_id is beautiful !
....
You must also add a jquery plugin to display your lightbox (there are a thousand...)
Your JsCode will be something like that:
$("#items a").click(function () {
$("#result").load($(this).attr("href"), function() {
displayPopup(); // code this
});
});
(Or maybe a totally different code if the plugin natively handle ajax...)
In resume, there is a lot of work to do, and many ways to do it.
Just try !
I have a problem where in i have to fetch the particular data of row on clicking that particular rows button and have to display that data via ajax on the same page.
Here is the code of index.scala.html:
#(products: List[Products])
#import helper._
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<h1>#products.size() product(s)</h1>
<table border=1>
<tr>
<td>Product Name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
#for(product <- products) {
<tr>
<td>
#product.productname
</td>
<td>
#product.quantity
</td>
<td>
#product.price
</td>
<td>
<input type="button" value="Add Product" name="#routes.Application.user(#product.product_id)" id="but"/>
</td>
</tr>
}
</table>
<div class="result" style="border: 1px solid black; padding: 5px;">not sent yet...</div>
<script type="text/javascript">
jQuery("#but").click(
function () {
$.get(jQuery(this).attr("name"), function (data) {
$('.result').html(data);
});
return false;
}
)
</script>
My Application.java contains the method as shown below:
public static Result user( id){
return ok("Play's controller told that you're about to get data for user no. "+id);
}
The problem i am facing is in the line:
**<input type="button" value="Add Product" name="#routes.Application.user(#product.product_id)" id="but"/>**
Error is: Compilation error
illegal start of simple expression
Can anyone please help to load the dymanic data.
Please remove the second #:
#routes.Application.user(product.product_id)
The second one is not needed, since the first indicates that you're in the templating language.
I came across a code that is said to update only that piece of code, which is placed inside the div tag. I need to print the seconds left for 1-1-2013. But I get to see nothing. Anything placed inside the div tag is not visible. Since I am not at hands with JQuery and Ajax, I am unable to spot my mistake.
<body bgcolor="#73AF59">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<audio preload="auto" src="tones/Time-In-A-Bottle.mp3" loop autoplay>
</audio>
<%!
GregorianCalendar newYear = new GregorianCalendar(2013, 0, 1);
/*
* 0 : January
* 1 : 1st January
* 2013 : year
*/
%>
<table width="100%">
<tr>
<td width="40%"> </td>
<td> <img src="images/animations/pyear.gif" /> </td>
</tr>
<tr>
<td width="40%"> <center> <font face="Chiller" size="+6"> <br /> Countdown </font> </center> </td>
<td> <center> <font face="Chiller" size="+6"> <br />
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php').fadeIn("slow");
}, 1000); // refresh every 10000 milliseconds
<div id="load_tweets">
<%= ( newYear.getTimeInMillis() - new GregorianCalendar().getTimeInMillis() ) / 1000 %>
</div>
</script>
</font> </center>
</td>
</tr>
<tr>
<td colspan="2" style="height:400px" valign="bottom"> <img src="images/animations/3D_balloons.gif" />
<em>This poor design and animations compiled by Suhail Gupta.</em>
<audio style="visibility: hidden" > </audio>
</td>
</tr>
<!-- !-->
The statement <%= ( newYear.getTimeInMillis() - new GregorianCalendar().getTimeInMillis() ) / 1000 %> , should print the seconds left for the arrival of 2013.
To print result (subtraction of mills of two date) on web-page at given interval you need to create a servlet that produce subtraction of mills and write Ajax routine in JSP to request that servlet.
Servlet
#WebServlet(name = "TestServlet", urlPatterns = {"/test"})
public class TestServlet extends HttpServlet {
#Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
double value=((double)(new GregorianCalendar(2013, 0, 1).getTimeInMillis() - new GregorianCalendar().getTimeInMillis()))/1000;
PrintWriter pw=response.getWriter();
response.setContentType("text/plain");
pw.print(value);
pw.flush();
}
}
and page that request the servlet using $.ajax method:
test-page.jsp
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){
$.ajax({
url: 'test',
type: 'get',
dataType: 'text',
success: function(data){
$("#result").html(data);
}
});
},1000);
});
</script>
</head>
<body>
<div id="result"></div>
</body>
There are several things to think:
You are missing the doc ready handler for the jQuery
You have placed your div inside of the <script/> tag
try with removing the fadeIn
So your code has to be like this:
<body bgcolor="#73AF59">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<audio preload="auto" src="tones/Time-In-A-Bottle.mp3" loop autoplay></audio>
<%!
GregorianCalendar newYear = new GregorianCalendar(2013, 0, 1);
/*
* 0 : January
* 1 : 1st January
* 2013 : year
*/
%>
<table width="100%">
<tr>
<td width="40%"> </td>
<td> <img src="images/animations/pyear.gif" /> </td>
</tr>
<tr>
<td width="40%"> <center> <font face="Chiller" size="+6"> <br /> Countdown </font> </center> </td>
<td>
<script type="text/javascript">
$(document).ready(function(){ // try to put in doc ready handler
var auto_refresh = setInterval(function (){
$('#load_tweets').load('record_count.php');
}, 1000); // refresh every 10000 milliseconds
});
</script>
<center>
<font face="Chiller" size="+6"> <br />
<div id="load_tweets">
<%= ( newYear.getTimeInMillis() - new GregorianCalendar().getTimeInMillis() ) / 1000 %>
</div>
</font>
</center>
</td>
</tr>
<tr>
<td colspan="2" style="height:400px" valign="bottom"> <img src="images/animations/3D_balloons.gif" />
<em>This poor design and animations compiled by Suhail Gupta.</em>
<audio style="visibility: hidden" > </audio>
</td>
</tr>
<!-- !-->
or you can move this up just below jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // try to put in doc ready handler
var auto_refresh = setInterval(function (){
$('#load_tweets').load('record_count.php');
}, 1000); // refresh every 10000 milliseconds
});
</script>
Try this and see if this helps you.