How Do I Change Div's Content With jQuery To Different PHP Files - Using Hyperlinks - No Refresh Of Page
Question
How Do I Change Div's Content With jQuery To Different PHP Files - Using Hyperlinks - No Refresh Of Page
Lets say I have a div with the id of statsdiv
Then Lets say I have These Pages:
page1.php page2.php page3.php
And 3 links.
page1 | page2 | page3
I need it to preload page1 when the document is first opened, then I need to be able to change to page1, page2, or page3 within 1 div of the page without the page refreshing.
I also need that div to refresh every 5 seconds.
How can I accomplish this?
2 answers
solution1
1 2012-07-19 16:56:55
You can use iframe, which are boxes in which you can load complete pages without so much work.
However, i would recommand you to use AJAX. Everytime the person click on your links, you create a javascript function with jquery that will do
$('#statsdiv').load('page1.html');
If i remember correctly this shouldn't reload the whole page, but only your div. Please let me know if i am wrong, as i cannot try my code right now.
solution2
0 2012-07-19 17:03:54
Try this , i consider that your div has an id of stats (#stats), and pages have links like page1.php, page2.php and page3.php. Initially it will load page1.php and later onclick events will change the pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// for initial load
pageUrl = 'page1.php';
// after clicking links
$('#page2').click(function(){
pageUrl = 'page2.php';
LoadingPages(pageUrl);
})
$('#page3').click(function(){
pageUrl = 'page3.php';
LoadingPages(pageUrl);
})
$('#page1').click(function(){
pageUrl = 'page1.php';
LoadingPages(pageUrl);
})
function LoadingPages(pageUrl)
{
$('#stats').load(pageUrl);
}
int = setInterval(function(){
LoadingPages(pageUrl)
},5000);
})
</script>
</head>
<body>
<div id="stats"></div>
<a href="#" id="page1"> Page 1</a>
<a href="#" id="page2"> Page 2</a>
<a href="#" id="page3"> Page 3</a>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.