How to refresh DIV using jquery
There are very simple steps to achieve this: Step 1: Copy the following code and paste it in the head section of your webpage.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow"); }, 20000); </script>Here, above the file “reload.php” will be reloaded in every 20000ms i.e 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement. and secondly, the #loaddiv is the name of DIV which is going to be refreshed.
Step 2: and now you need to put the div in the body section of your page
<div id="loaddiv">
</div>Step 3: Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement. here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.
echo"<img src='http://www.76miles.com/'/>";Now your page is ready . Click here to see the demo.
THE SOUCE DEMO
<html> <head> <style type="text/css"> #loaddiv{
background-color:#ffddcc;
font-size:24px;
font-family:'Georgia', Times New Roman, Times, serif;
font-weight:bold;
} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"> </script> <script> var auto_refresh =setInterval(
function(){
$('#loaddiv').fadeOut('slow').load('reload.php')
.fadeIn("slow");
}, 20000); </script> </head> <body> <div id="area1"> <p> <b>This is the demo program to demonstrate the div refreshing with ajax and jquery.
The following div will be loaded in 20sec</b> </p>
</div> <div id="loaddiv"> </div> </body> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
leetcode_129_Sum Root to Leaf NumbersGiven a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number. An example is th...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
