How Do I Change Div's Content With jQuery To Different PHP Files - Using Hyperlinks - No Refresh Of Page

0
votes

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
phpjquery
Ajax, polling, and DOM manipulation. – Matthew Blancarte

2 Answers

1
votes

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.

0
votes

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>