Auto refreshing the content without reloading page, using JQuery
February 6, 2010 17 Comments
In my previous post I have given some tips to select multiple rows from a database table. Now we can import that page into a div, so that we can refresh the content of div without reloading the page (or you can create your own JSP page which content may dynamically change). In result, if the database content get change the page will auto refresh to get reload the changes.
For that we have JQuery framework, which you can download from here. And adding the below function of database we can reload the target JSP file in a DIV in every given time interval.
<html>
<head>
<Title>Just A Test</Title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_me').load('showdata.jsp').fadeIn("slow");
}, 10000); // autorefresh the content of the div after
//every 10000 milliseconds(10sec)
</script>
</head>
<body>
<div id="load_me"> <%@ include file="showdata.jsp" %></div>
</body>
</html>
Would this basically allow me to place a mp3 player in the footer that wouldn’t cause the page to reload upon clicking any link on the page?
Why not, actually MP3 will resides on server and you have to only load the url of the MP3 using this. As new URL of MP3 get re-loaded, it should play in you player.
Couldn’t tell why, because i’m unfamiliar with <% stuff, but the string starting with <% doesn't work… It simply prints the text itself but doesnt seem to do what it has to… Any additionnal tips sir?
hello metthieu,
are you placing these files in webserver??
actually <% %> is an JSP Scriptlet. to compile this tag you must place file in webserver.
Its really a good post.thnaks
Hi…This article helped me a lot. Thanks…
Thank You. it’s very helpful for me…
hello thank you.very much for its working…..strongly………..
where is the showdata.jsp file……..
itzzz just auto refreshing the page but not updating the status from database . can u help me?
make on load at your page to get data, so after jquery refresh your page (on the load your page will get data). helped?
I copied jquery.js and In getdata.jsp i added
I see the div getting refreshed only once. not every 10secs.
Can you pls let me know if i am missing something
can you send me the source code?
Hi,
I just copied the code given in this link to index.jsp. Then downloaded jQuery.js from the link provided.
In getData.jsp I have only one line
“System.currentTimeMillis()”
there must be some mistake in Javascript code, the code inside setInterval.
i just now noticed that, the issue occurs only in IE… It works fine in Mozilla and chrome…
In my case I can replace the .load(‘jsp’) with .text(‘Hello’) and see it happen. However,
the load(‘jspPage’), doesn’t work. I have the include part in the div exactly like your’s.
I reference it the same way in the load, but it doesn’t load.