jQuery Refresh DIV Content Without Reloading Page using setTimeout Function

By: Suresh Dasari Feb 24, 2015

Introduction:

Here I will explain how to use jQuery to refresh or reload div content without reloading page for every 10 seconds with example using setTimeout function or jQuery reload or refresh div for every 10 seconds without reloading page or Refresh div content without reloading page using jQuery.

Description:

In previous articles I explained Different methods to reload / refresh page using jQuery, jQuery reload iframe for every 10 or 5 seconds, jQuery reload or refresh iframe, jQuery different methods to reload or refresh div, Javascript call function for every 5 or 10 seconds using setinterval function and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to refresh or reload div content without reloading page for every 10 seconds with example using setTimeout function.

By using setTimeout function we can refresh div content without reloading page for every 10 seconds using jQuery like as shown below

$(function () {

setTimeout(function() { $("#testdiv").fadeOut(1500); }, 10000);

$('#btnclick').click(function() {

$('#testdiv').show();

setTimeout(function() { $("#testdiv").fadeOut(1500); }, 10000);

});

})

</script>

If you want to check it in complete example you need to write the code like as shown below

<head>

<title>jQuery Refresh DIV Elements after 10 seconds</title>

$(function () {

setTimeout(function() { $("#testdiv").fadeOut(1500); }, 5000);

$('#btnclick').click(function() {

$('#testdiv').show();

setTimeout(function() { $("#testdiv").fadeOut(1500); }, 5000);

});

})

</script>

.content

{

border: 2px solid Red;

color: #008000;

padding: 10px;

width: 400px;

font-family:Calibri;

font-size:16pt

}

</style>

</head>

<body>

Hi, Welcome to Aspdotnet-Suresh.com

It will disappear in 5 seconds!

</div>

</body>

</html>

Live Demo

For live demo check below div it will hide after 5 seconds if you want see it again click on button to show div again it will show div without reloading complete page

Hi, Welcome to Aspdotnet-Suresh.com It will disappear in 5 seconds!

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

1 comments :

Anonymous said...: Hi, can you make codes like that but by using fade in and fade out, i no need the button to fade out, i hope you understand; July 22, 2017 at 8:27 AM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview