Sunday, 29 May 2016

Refresh a particular div jQuery

Refresh a particular div jQuery

Method 1:
How to refresh a particular div content when page is loading through ajax load() function

<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" data-url="location.html">Location</a></li>
<li><a href="#" data-url="multi.html">Multi-Location</a></li>
</ul>
<div id="home"></div>

$('#nav a').on('click', function(e){
     e.preventDefault();
     $('.active').removeClass('active'); // removes the active class from other link
     $(this).addClass('active'); // adds the active class to current cliked link
     setInterval(function(){
       $("#home").load($('.active').data('url'),{},function(){}); // populates the div with data-url of active class.
     }, 5000);
});
$('#nav li:eq(0) a').trigger('click'); // triggers the first link's click.

Method 2:
Refesh Particular div by jquery. 
$("#userRecord").load(location.href+" #userRecord>*","");

Method 3:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
setInterval(function(){
       autoRefresh_div();
     }, 5000);
function autoRefresh_div()
{
$("#result").load("load.html");// a function which will load data from other file after x seconds
}

</script>

0 comments:

Post a Comment