Auto refreshing the content without reloading page, using JQuery

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>
Advertisements

18 Responses to Auto refreshing the content without reloading page, using JQuery

  1. rawr says:

    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?

    • Prashant says:

      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.

  2. Matthieu says:

    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?

    • Prashant says:

      hello metthieu,
      are you placing these files in webserver??
      actually <% %> is an JSP Scriptlet. to compile this tag you must place file in webserver.

  3. venkadesh says:

    Its really a good post.thnaks

  4. Deepa says:

    Hi…This article helped me a lot. Thanks…

  5. Emad Bishay says:

    Thank You. it’s very helpful for me…

  6. hello thank you.very much for its working…..strongly………..

  7. gagan says:

    where is the showdata.jsp file……..

  8. gagan says:

    itzzz just auto refreshing the page but not updating the status from database . can u help me?

    • asd says:

      make on load at your page to get data, so after jquery refresh your page (on the load your page will get data). helped?

  9. Srini says:

    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

    • Prashant says:

      can you send me the source code?

      • srini says:

        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()”

      • Prashant says:

        there must be some mistake in Javascript code, the code inside setInterval.

      • srini says:

        i just now noticed that, the issue occurs only in IE… It works fine in Mozilla and chrome…

  10. John Wooten says:

    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.

  11. shareen shahana says:

    i found that, It works fine in chrome…but IE 8 am not able to refresh is happening only once…..can any one help me to slove

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: