Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Linking external html files to one page.

    I have tried to search all over for an answer to this problem but can't make anything stick. I am trying to use PHP to link html files holding different text together on one web page template. So it seems the page changes but it only loads new content not an entire page. Here is what I have so far:

    The links that switch between content:
    Code:
    <a href="page.php?page=firstpage.html">First Page</a>
    <a href="page.php?page=secondpage.html">Second Page</a>
    The div tag where I want new content loaded:
    Code:
     
    <div id="text">
    <?php switch($page) { default: include('firstpage.html');
    break; case "executive": include('firstpage.html');
    break; case "team": include('seccondpage.html');
    } ?>
    </div>

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    Use Ajax,

    You can see an example here
    http://www.blueicestudios.com/stat/new.html

    Put this in the head section
    Code:
    <script type="text/javascript">
    function ajax(url, target) {
      document.getElementById(target).innerHTML = ' <img src="ajax-loader.gif" border="0">';
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (req != undefined) {
        req.onreadystatechange = function() {ajaxDone(url, target);};
        req.open("GET", url, true);
        req.send("");
      }
    }  
    
    function ajaxDone(url, target) {
      if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
          document.getElementById(target).innerHTML = req.responseText;
        } else {
          document.getElementById(target).innerHTML=" Ajax Error:\n"+ req.status + "\n" +req.statusText;
        }
      }
    }
    
    function load(name, div) {
    	ajax(name,div);
    	return false;
    }
    </script>
    Links and Div, in the load function page1.html is the page to call. text is the div to load into.
    Code:
    <a href="#" onclick="load('page1.html','text');return false;">Page 1</a> | 
    <a href="#" onclick="load('page2.html','text');return false;">Page 2</a>
    <div id="text"></div>
    Grab this gif and put it in the same dir as the page with the js.

  • #3
    Senior Coder
    Join Date
    Aug 2009
    Location
    Mansfield, Nottinghamshire, UK
    Posts
    1,555
    Thanks
    57
    Thanked 148 Times in 147 Posts
    in your links have the href="index.php?pg=firstpage"

    then use the following:
    PHP Code:
    <?php

    if(isset($_GET['pg']))
    {
        
    $page $_GET['pg'].".php";
        
    $dir ""//this is here incase you have it in a folder
        
    if(file_exists($dir.$page))
        {
            include(
    $page);
        }
        else
        {
            echo 
    "The page does not exist";    
        }
    }

    ?>

    i would change all you .html extentions that you load in to .php

  • Users who have thanked Phil Jackson for this post:

    Christina Knapp (08-27-2009)

  • #4
    Senior Coder
    Join Date
    Aug 2009
    Location
    Mansfield, Nottinghamshire, UK
    Posts
    1,555
    Thanks
    57
    Thanked 148 Times in 147 Posts
    Quote Originally Posted by seco View Post
    Use Ajax,

    You can see an example here
    http://www.blueicestudios.com/stat/new.html

    Put this in the head section
    Code:
    <script type="text/javascript">
    function ajax(url, target) {
      document.getElementById(target).innerHTML = ' <img src="ajax-loader.gif" border="0">';
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (req != undefined) {
        req.onreadystatechange = function() {ajaxDone(url, target);};
        req.open("GET", url, true);
        req.send("");
      }
    }  
    
    function ajaxDone(url, target) {
      if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
          document.getElementById(target).innerHTML = req.responseText;
        } else {
          document.getElementById(target).innerHTML=" Ajax Error:\n"+ req.status + "\n" +req.statusText;
        }
      }
    }
    
    function load(name, div) {
    	ajax(name,div);
    	return false;
    }
    </script>
    Links and Div, in the load function page1.html is the page to call. text is the div to load into.
    Code:
    <a href="#" onclick="load('page1.html','text');return false;">Page 1</a> | 
    <a href="#" onclick="load('page2.html','text');return false;">Page 2</a>
    <div id="text"></div>
    Grab this gif and put it in the same dir as the page with the js.
    Yet this new era of design is brilliant the above code is still not highly accessible and when Google bots come storming along it is with javascript disabled.

    Thats why when loading content, i would not use this method.

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    I agree Phil, I usually use ajax for more or less data retrieval and or widgets. She just asked about loading a new page without page refresh and since I use ajax on a daily basis for most of my work, its the first thing that came to mind. Soon we wont have to worry about that the way the net is moving.

  • #6
    Senior Coder
    Join Date
    Aug 2009
    Location
    Mansfield, Nottinghamshire, UK
    Posts
    1,555
    Thanks
    57
    Thanked 148 Times in 147 Posts
    Hoping so my friend, AJAX is a great playing field I can wait to tear up. As you have said, I use AJAX for all sorts apart from data retrieval. I blame google! lol

    EDIT: and Microspoof
    Last edited by Phil Jackson; 08-27-2009 at 08:46 PM.

  • Users who have thanked Phil Jackson for this post:

    seco (08-27-2009)

  • #7
    New Coder
    Join Date
    Dec 2008
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Phil,
    That code worked great. I knew it had to be something simple. Now on to my next problem. =)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •