How do I 'include' a page without php?

Report · Sep 13, 2015

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?

Report · Sep 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?

Report · Sep 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

Report · Sep 17, 2015

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

Report · Sep 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

Report · Sep 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>

    

    <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>



    

    <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.

Report · Oct 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 !!!

Report · Oct 10, 2015

Thanks much - this will work great I'll bet!

Report · Oct 10, 2015

Hi sinious - I just tried the code and it works perfectly - so simple thanks!

Report · Oct 10, 2015

revdave wrote:

Hi sinious - I just tried the code and it works perfectly - so simple thanks!

Just remember that IF and its a big IF anyone has javascript switched off then this include method is not going to work. I much prefer to use php for includes IF what is being included is critical like a navigation system for instance. It's not a big concern but its one to maybe consider.

Report · Oct 11, 2015

OP mentioned that they are trying to work on a phone gap website - and they don't use any php so I they are limited to using HTML / javascript for now.

FWIW IF you have javascript disabled then you wouldn't be able to reply in this forum either.

best,

Shocker

Report · Oct 11, 2015

the_shocker wrote:

OP mentioned that they are trying to work on a phone gap website - and they don't use any php so I they are limited to using HTML / javascript for now.

FWIW IF you have javascript disabled then you wouldn't be able to reply in this forum either.

best,

Shocker

I was really being picky. I think the nubmer of users with js disabled is negligible to the point where it's not really much of an issue. As you say a large majority of websites would be severely affected if a user has js disabled.

Report · Oct 12, 2015

You're welcome revdave

Report · Oct 25, 2015

Ok well now I tried to add it into my template... the footer shows up but not the header - any idea why not?

btw: I tried to add raw html example - not seeing it show up yet...

------------

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<meta name="viewport" content="width=device-width, initial-scale=1">





<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

    $(function(){

        $( "[data-role='header'], [data-role='footer']" ).toolbar();

        });

    </script>

</head>

<body>

<div data-role="header" data-position="fixed" data-theme="a"></div>

<section id="page1" data-role="page">





body text

then the rest

<div data-role="header" data-position="fixed" data-theme="a"></div>

<section id="page1" data-role="page">





body text



</section>

<footer data-role="footer" data-position="fixed" data-theme="a"></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-inc.html", function(fileData){

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

        });



        // add footer.html into <footer>

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

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

        });



      });



    </script>

</body>

</html>

Report · Oct 30, 2015

Hi,

the example above was messed up so I will repost here - below...

In the example, I tried to add it into my template... the footer shows up but not the header - any idea why not?

Q: How do I get the "Header include" to also show up in the example?

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<meta name="viewport" content="width=device-width, initial-scale=1">





<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

    $(function(){

        $( "[data-role='header'], [data-role='footer']" ).toolbar();

        });

    </script>

</head>

<body>

<div data-role="header" data-position="fixed" data-theme="a"></div>

<section id="page1" data-role="page">

<div data-role="header" data-position="fixed" data-theme="a"></div>

<section id="page1" data-role="page">



body text



</section>

<footer data-role="footer" data-position="fixed" data-theme="a"></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-inc.html", function(fileData){

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

        });



        // add footer.html into <footer>

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

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

        });



      });

    </script>

</body>

</html>

Report · Oct 30, 2015

Your code is saying put contents of footer-inc.html into any <footer> element on your page and it's doing that because you have a <footer> element on your page.

Your code is also saying put contents of header-inc.html into any <header> element on your page but since you don't have any <header> element(s) on your page nothing is showing in your non-existent <header> element(s). Perhaps you wanted header-inc.html to be placed in the <div> element that had the attribute [data-role='header']. If that's the case then modify your code to this:

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

$('div[data-role='header']').html(fileData);

});

best,

Shocker

Report · Nov 06, 2015

Thanks so much - That makes sense! - I'll give it a try

How do I 'include' a page without php?

1 Correct answer