trouble with include HTML

**mcolton** · 02-20-2017, 06:06 PM

1) Script Title:
How TO - Include HTML
2) Script URL (on DD):
https://www.w3schools.com/howto/howto_html_include.asp
3) Describe problem:
doesn't work. I have included the code below of my test program and the include file "header3.html". When I run it, the included file is not shown. When I put the header3.html code into the program, it shows up fine.
Thanks for any help.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <title>Lake Oconee Tennis Association</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="w3data.js"></script>
  </head>

  <body>
    <div w3-include-html="header3.html"></div> 
    <script>w3IncludeHTML();</script>
	
    <div>
	    <p style="color: #006633; font-weight: bold; margin-left: 6px; width: 91%">
		    <span style="font-size: 18px">Mission Statement:</span>
	      <span style="font-size: 16px; font-style: italic">
		      LOTA represents the Lake Oconee Area with members from Greene, Putnam, Morgan, and Baldwin Counties. 
    			Our purpose and objective is to create, develop, maintain and promote tennis in  
	        our community. Our goal is to provide tennis opportunities and programs, where we all have fun, play good 
	        matches, and benefit from physical activity.
  		  </span>
  	  </p>
    </div>
  </body>
</html>

and the header3 file

HTML Code:

<div>
  <span style="width:15%; text-align:center; float:left">
    <img src="lotalogo.jpg" width="195" height="187" alt="LOTA logo" />
  </span>		
  <p style="width:61%; font-family: arial black; text-align:center; color:blue; float:left">
     <span style="font-size:40px; font-style:italic">
        Lake Oconee Tennis Association<br />
     </span>
     <span style="font-size:16px; text-align:center; vertical-align:top; color:black">                
       PO Box 58, Greensboro, GA 30642
    </span>
  </p> 

  <div>
    <span style="width:20%; text-align:right; float:left; margin-left: 10px">
       <div id="cont_207c19025454af9f9b8d13576ae36716">
         <script type="text/javascript" async src="https://www.theweather.com/wid_loader/207c19025454af9f9b8d13576ae36716">
         </script>
      </div>			
    </span>
  </div>		
</div>

**jscheuer1** · 02-20-2017, 07:11 PM

Well first of all, even if this worked, it's a very basic AJAX request and your script there on the included file (https://www.theweather.com/wid_loader/207c19025454af9f9b8d13576ae36716) will likely not work as expected.

If nothing is showing up, not even the text "Lake Oconee Tennis Association", etc. then there's a problem with the request itself not being carried out. Sometimes the browser will find excuses for not carrying out AJAX request on local files, seeing them as security violations. Or there might just be a syntax error somewhere. Check in the browser's developers console for any errors or warnings.

If you want more help. please put up a demo of the problem live somewhere we can check it out.

Just tested this - looks like it has to be live or on a local server sandbox. It won't run for me either on just the hard drive. Also, I don't know what that script I mentioned is supposed to do, but as i suspected, it doesn't seem to do anything even when I run the include on my local server sandbox.

**molendijk** · 02-20-2017, 07:31 PM

If you have not saved w3data.js as a separate js-file and / or if you didn't put it in the right directory, the include won't work when you just reference the file with w3data.js.
Try <script src="https://www.w3schools.com/lib/w3data.js"></script> instead of <script type="text/javascript" src="w3data.js"></script>. That should work even without downloading the js-file.

**molendijk** · 02-20-2017, 07:43 PM

I just tested it. It works on my machine. So I guess the only thing you have to do is to either replace <script type="text/javascript" src="w3data.js"></script> with <script type="text/javascript" src="https://www.w3schools.com/lib/w3data.js"></script> or keep the js-line as it is and download the w3data.js-file to the directory where you also keep the other files.

**mcolton** · 02-20-2017, 07:58 PM

I'll play with it some more. I downloaded the js file and it still didn't work. I tried both ways of accessing the js file.
Is there a better way to do what I'm trying to do

**molendijk** · 02-20-2017, 08:15 PM

It should work. Please put up a demo of the problematic pages live so that we can see what the problem is.

An alternative (better) method:
1. In the head:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. In the body:

Code:

 <div id="my_header_include"></div><script>$('#my_header_include').load('header3.html')</script>

But I doubt that this will work for you because I think there's some error on your page(s), otherwise the W3-method should already have worked.

**jscheuer1** · 02-20-2017, 08:25 PM

It won't work on the local hard drive here. For most browsers it has to be live. But even if you do go live:

Code:

<script type="text/javascript" async src="https://www.theweather.com/wid_loader/207c19025454af9f9b8d13576ae36716">

probably cannot be imported that way. See my previous response in this thread:

http://www.dynamicdrive.com/forums/s...032#post321032

**mcolton** · 02-20-2017, 08:49 PM

ok I put a test copy online. It is working except the weather widget does not show up like you said.
You get see it by going to and going to the lower left corner. Click "test" and then go to "All About LOTA" and click testing Marty only.

What I'm trying to do is put everything from the blue menu line up on a bunch of pages.
Thanks for all the help so far

**jscheuer1** · 02-20-2017, 09:08 PM

If you use jQuery it (including the weather app) appears to work (still needs to be live):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <title>Lake Oconee Tennis Association</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('#header3').load('header3.html');
});
</script>
  </head>

  <body>
    <div id="header3"></div> 	
    <div>
	    <p style="color: #006633; font-weight: bold; margin-left: 6px; width: 91%">
		    <span style="font-size: 18px">Mission Statement:</span>
	      <span style="font-size: 16px; font-style: italic">
		      LOTA represents the Lake Oconee Area with members from Greene, Putnam, Morgan, and Baldwin Counties. 
    			Our purpose and objective is to create, develop, maintain and promote tennis in  
	        our community. Our goal is to provide tennis opportunities and programs, where we all have fun, play good 
	        matches, and benefit from physical activity.
  		  </span>
  	  </p>
    </div>
  </body>
</html>

Use the same header3.html page as before.