Skip to main content
R
revdave
Inspiring
September 13, 2015
Answered

How do I 'include' a page without php?

  • September 13, 2015
  • 4 replies
  • 9797 views

Hi all,

javascript newbie 

with php, I would 'include' another page like:

     <?php include('header.php'); ?>

In this case I have html5 page and javascript - so using html5 and javascript ...

Q: how can I do the same thing and 'include' a basic html5 header or footer with javascript?

This topic has been closed for replies.
Correct answer sinious

In your "header" and "footer", do you plan on having tags such as <html> <head> <body>, etc? I'm presuming you don't because things can get more complicated.

Just use a popular library to help you with simple DOM tasks. You can use the previously mentioned framework but if you really just want to insert some content, JavaScript + library is pretty simple.

Example:

http://plnkr.co/edit/nIyDyJvQDwM3TIfj0kRB?p=preview

Full source:

<!DOCTYPE html>

<html>

  <head>

    <!-- include the library here -->

    <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  </head>

  <body>

    <header></header>

    <h1>Hello, World!</h1>

    <footer></footer>

   

    <!-- code for including header/footer -->

    <script type="text/javascript">

     

      // we're ready, include away

      $(window).ready(function(){

       

        // use easy AJAX jQuery helpers

       

        // add header.html into <header>

        $.get("header.html", function(fileData){

          $('header').html(fileData);

        });

       

        // add footer.html into <footer>

        $.get("footer.html", function(fileData){

          $('footer').html(fileData);

        });

       

      });

    </script>

  </body>

</html>

Just paste that in a file, name it html and load it up on a server, same as the live example above.

4 replies

sinious
siniousCorrect answer
Legend
September 17, 2015

In your "header" and "footer", do you plan on having tags such as <html> <head> <body>, etc? I'm presuming you don't because things can get more complicated.

Just use a popular library to help you with simple DOM tasks. You can use the previously mentioned framework but if you really just want to insert some content, JavaScript + library is pretty simple.

Example:

http://plnkr.co/edit/nIyDyJvQDwM3TIfj0kRB?p=preview

Full source:

<!DOCTYPE html>

<html>

  <head>

    <!-- include the library here -->

    <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  </head>

  <body>

    <header></header>

    <h1>Hello, World!</h1>

    <footer></footer>

   

    <!-- code for including header/footer -->

    <script type="text/javascript">

     

      // we're ready, include away

      $(window).ready(function(){

       

        // use easy AJAX jQuery helpers

       

        // add header.html into <header>

        $.get("header.html", function(fileData){

          $('header').html(fileData);

        });

       

        // add footer.html into <footer>

        $.get("footer.html", function(fileData){

          $('footer').html(fileData);

        });

       

      });

    </script>

  </body>

</html>

Just paste that in a file, name it html and load it up on a server, same as the live example above.

R
revdaveAuthor
Inspiring
October 10, 2015

Hi all,

Sooo sorry for the late response - I got pulled away on other matters.

In my case I am trying to work on a phone gap website - and they don't use any php so I am limited to using HTML / javascript for now

Thanks SO MUCH for all the helpful ideas !!!

Ken_Binney
Ken_Binney
Inspiring
September 17, 2015

Just curious, why are you avoiding PHP?  It plays nicely with everything else.

A
Anonymous
September 17, 2015

There could be many reasons why someone would avoid php. Perhaps php isn't installed on the server and/or they're using javascript as their server side language. Perhaps they want their server to behave asynchronously instead of the lagging request, process, response method that php provides when you don't implement workarounds. php doesn't play nicely with everything else, especially a user's patience, unless sitting around twiddling your thumbs while you wait for php to return a response to a request is your idea of playing nicely with everything else.

best,

Shocker

A
Anonymous
September 14, 2015

You asked how to 'include' using javascript, not a link on how to do SSI. So the SSI link the other poster provided isn't helpful to what you're asking.

To use javascript templates instead of ssi use something like handlebars or spacebars. More info at Handlebars.js: Minimal Templating on Steroids

best,

Shocker

Rob Hecker2
Rob Hecker2
Legend
September 14, 2015

http://httpd.apache.org/docs/2.4/howto/ssi.html

. . .however, you can mix HTML, PHP and Javascript, so why not just use PHP includes?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices