• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I 'include' a page without php?

Contributor ,
Sep 13, 2015 Sep 13, 2015

Copy link to clipboard

Copied

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?

Views

8.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 17, 2015 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>

    <!-- include the library here -->

...

Votes

Translate

Translate
Guru ,
Sep 14, 2015 Sep 14, 2015

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 14, 2015 Sep 14, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 17, 2015 Sep 17, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 17, 2015 Sep 17, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 17, 2015 Sep 17, 2015

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 10, 2015 Oct 10, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 10, 2015 Oct 10, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 10, 2015 Oct 10, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 10, 2015 Oct 10, 2015

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Oct 11, 2015 Oct 11, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 11, 2015 Oct 11, 2015

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 12, 2015 Oct 12, 2015

Copy link to clipboard

Copied

You're welcome revdave

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 25, 2015 Oct 25, 2015

Copy link to clipboard

Copied

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

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

  -->

 

 

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

   

<!--INSERT START -->

body text

then the rest

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

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

   

<!--INSERT START -->

body text

<!--INSERT END -->

</section><!-- /page -->

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

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

        });

     

        // add footer.html into <footer>

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

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

        });

     

      });

   

    </script>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Oct 30, 2015 Oct 30, 2015

Copy link to clipboard

Copied

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

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

  -->

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

<!--INSERT START -->

body text

<!--INSERT END -->

</section><!-- /page -->

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

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

        });

   

        // add footer.html into <footer>

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

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

        });

   

      });

 

    </script>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Oct 30, 2015 Oct 30, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 06, 2015 Nov 06, 2015

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines