PDA

View Full Version : Resolved 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.



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


<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:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2. In the body:
<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:


<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/showthread.php?80973-trouble-with-include-HTML&p=321032#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):


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

mcolton
02-20-2017, 09:32 PM
Thanks. I'll give it a try

molendijk
02-20-2017, 09:34 PM
ok I put a test copy online.
I'm probably being blind but I don't see the test copy

jscheuer1
02-21-2017, 02:15 AM
I decided to review the documentation on jQuery's AJAX shorthand load() function and it explicitly specifies scripts will be loaded and executed when used in the way I have shown you. But one thing I noticed is it can cache the result. Meaning if you change header3.html, changes might not show up immediately for a user who has recently visited. If this is a problem, you can add the highlighted to the script that loads the external content:


<script type="text/javascript">
jQuery(function($){
$.ajaxSetup({cache: false});
$('#header3').load('header3.html');
});
</script>

Then each time it's called, it will make a fresh request. You really should NOT do this unless you've just made a critical change to header3.html as it will slow things down more than necessary and put extra demands on the server. Users will eventually be shown the updated content anyway. And new users, and those who have recently cleared their caches and/or whose cache of that page (header3.html) has expired, will always get the most recent version.

mcolton
02-21-2017, 06:56 PM
Well, it was working for the first part of the header. When I added the rest of the header (the ddsmoothmenu), it didn't work.
I did add that 1 line for ajaxsetup. The new header3.html is shown below. it is still online at lotatennis.com. Go to lower left and click "test". Then under "All About LOTA" click "Marty test only"



<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>
<p 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>
</p>
</div>

<p><br /><br /><br /><br /><br /><br /><br /><br />
</p>

<!-- Markup for mobile menu toggler. Hidden by default, only shown when in mobile menu mode -->
<a class="animateddrawer" id="ddsmoothmenu-mobiletoggle" href="#">
<span></span>
</a>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href = "#">All About LOTA</a>
<ul style="width:300px">
<li><a href="boardmembers.htm">Board Members</a></li>
<li><a href="president.pdf">Message from Kathy Mitchell, President</a></li>
<li><a href="passwd-protect/roster.pdf">Member Roster (need password)</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="statistics.htm">Member Statistics</a></li>
<li><a href="hall-of-fame.htm">Hall of Fame</a></li>
<li><a href="history.htm">Our History</a></li>
<li><a href="memorial.htm">In Memoriam</a></li>
<li><a href="google.htm">Google directions</a></li>
<li><a href="newindex3.htm">testing - Marty only</a></li>
<li><a href="directions.pdf">Directions to Courts</a></li>
<li><a href="LOTA Bylaws 10-19-15.pdf">Bylaws (boring)</a></li>
</ul>
</li>
<li><a href="#">LOTA Recreational Tennis</a>
<ul>
<li><a href="mixed.htm">Mixed Doubles</a></li>
<li><a href="ladies.htm">Ladies' Doubles</a></li>
<li><a href="singles.htm">Ladies' Singles&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a href="mens.htm">Men's Doubles&nbsp;&nbsp;</a>
</li>
</ul>
</li>
<li><a href="#" style="font-style:italic">Tournament</a>
<ul>
<li><a href="2016-regulations.pdf">2016 LOTA Classic Regulations</a></li>
<li><a href="2016-men-results.pdf">2016 Scoresheet Men</a></li>
<li><a href="2016-ladies-results.pdf">2016 Scoresheet Women</a></li>
<li><a href="recap.pdf">2016 LOTA Classic Recap</a></li>
<!--
<li><a href="classic-registration.htm">2016 Registration Form</a></li>
<li><a href="2015-classic-sponsors.pdf">2015 LOTA Classic Sponsors</a></li>
<li><a href="https://www.facebook.com/media/set/?set=a.412557578798963.98543.166617693392954&type=1&l=83144e1220">2012 Draw Party Pictures</a></li>
<li><a href="https://www.facebook.com/media/set/?set=a.412562352131819.98544.166617693392954&type=1&l=3fd172412c">2012 Tournament Pictures</a></li>
<li><a href=" https://www.facebook.com/media/set/?set=a.412578928796828.98546.166617693392954&type=1&l=3cdf6d1a1c">2012 Party Pictures</a></li>
-->
</ul>
</li><li><a href="#">USTA Links</a>
<ul>
<li><a href="http://www.usta.com"><img src="ustalogo.jpg" width="30" height="30" alt="USTA" />&nbsp;USTA Tennis</a></li>
<li><a href="http://www.southern.usta.com"><img src="new-usta-ss.gif" width="96" height="40" alt="Southern USTA" />&nbsp;USTA Southern</a></li>
<li><a href="http://www.ustageorgia.com"><img src="usta-ss-ga-button.jpg" width="119" height="40" alt="GA USTA" />&nbsp;USTA Georgia</a></li>
<li><a href="https://tennislink.usta.com/Dashboard/Main/Login.aspx?App=3">Tennis Link</a></li>
<li><a href="usta-regs.pdf">Local USTA League Regulations</a></li>
<li><a href="http://www.usta-sta.com/sub_membership_application.htm">Join USTA</a></li>
<li><a href="http://assets.usta.com/assets/1/15/2011FAC.pdf">2011 Friend at Court - Tennis Rules: You should know them</a></li>
<li><a href="ntrpcategories.htm">NTRP Categories</a></li>
<li><a href="http://www.tennisresortsonline.com">Tennis Resorts Online</a></li>
</ul>
</li>
<li><a href="#">Lake Oconee Links</a>
<ul style="width:250px">
<li><a href="http://www.greeneccoc.org">Greene County</a></li>
<li><a href="http://www.madisonga.org">Morgan County</a></li>
<li><a href="http://www.eatonton.com">Putnam County</a></li>
<li><a href="http://www.milledgevillega.com">Baldwin County</a></li>
<li><a href="http://www.reynoldslakeoconee.com">Reynolds Lake Oconee</a></li>
<li><a href="http://www.harborclub.com">Harbor Club</a></li>
<li><a href="http://www.cuscowilla.com">Cuscowilla</a></li>
<li><a href="http://www.LiveAtLakeOconee.com">Del Webb</a></li>
</ul>
</li>
<li><a href="#">Newsletters</a>
<ul style="width:250px">
<li><a href="newsletter-aug-2015.pdf">August 2015</a></li>
</ul>
</li>
<li><a href="#">Calendars</a>
<ul style="width:250px">
<li><a href="usta-lota-calendar2016.pdf">2016 LOTA USTA Calendar.</a></li>
</ul>
</li>
<li><a href="videos.htm">Tennis Videos</a>
<ul style="width:250px">
</ul>
</li>
<br style="clear: left" />
</div>

jscheuer1
02-21-2017, 07:23 PM
OK, I see what's happening. You're loading the markup for the menu in the include, but initializing it on the page itself, before the include loads. You might be able to initialize it on the include, but you for sure can do it as a return (success) function of the load, which might be best -

On the newindex3.htm page, get rid of:


<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

Change the load command's script to (additions highlighted, best to just copy and paste over what you have though):


<script type="text/javascript">
jQuery(function($){
$.ajaxSetup({cache: false}); // recommend commenting this out once things are working for a week or so
$('#header3').load('header3.html', function(){
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});
});
});
</script>

And on a side note, you're not using this anymore as far as I can see:


<script type="text/javascript" src="https://www.w3schools.com/lib/w3data.js"></script>


If I'm right about that, best to get rid of it and anything else the page is no longer using, like perhaps the w3.css link.

mcolton
02-21-2017, 07:55 PM
Wow. Lots to play with. I'll work on it. thanks.
Tried the changes. I get the menu fine but the spacing on the weather app is not right

jscheuer1
02-21-2017, 08:25 PM
Great on the menu! The weather app you will just have to play with the layout and css to get it where you want it. Or, if you need help with that, start a new thread, css and layout are not my strong points, others here have more experience in that area, though I'm good at tweaking it sometimes, so I will have a look. The thing to remember, is - it probably isn't any different than if it were on the page where you're importing it to in the first place.

mcolton
02-21-2017, 08:54 PM
Thanks. That's the weird part. If you run it online, the page before you click "Marty test only" shows the weather app correctly. When you click "Marty test only", it doesn't work.
I'm pretty sure the code is the same in both places but I'll check again.

mcolton
02-21-2017, 09:03 PM
I just tried it again and it seems to work.
Thanks for all your help. I learned a lot

jscheuer1
02-23-2017, 12:11 AM
OK, as promised, I did take a look and see it's working, but it wasn't with what you had before. I think there are two things about basic HTML and basic css you either aren't aware of, or that you missed in your earlier attempt.

Now since it seems to now be working, I wouldn't worry about these too much.

That said, these two are items are as follows.

1.) If you have a P element that contains another block level element like a div or another P, that will automatically close the P element, so styles on that P will not be used by its apparent child elements if they are block level. In the earlier demo I think this caught you up because you had the float on the P, and had a div inside it that contained the weather app, so the app wasn't floating like you had set for the P.

2.) Once you have established a working float, it doesn't take up any vertical layout space. I believe you have two floats in the header, one for the logo and one for the weather app. I think you overcame this by adding a lot of BR elements. But if you clear the float(s), you don't need so many and don't have to guess the optimal amount to use, ex:


<div>
<div style="float: left;">some content that has intrinsic height, like a logo image</div>
<div style="float: right;">some content, maybe a weather app, that has intrinsic height</div>
</div>
<div style="clear: both;"></div>
Now anything here will automatically go below the image and the weather app

mcolton
06-06-2017, 02:51 PM
I've been using this "include" stuff we've worked on for 4 months. It is working correctly however when I load the page, the bottom half loads quickly but then the "included" part loads 4-5 seconds later.
website is www.lotatennis.com (http://lotatennis.com)

Thanks if you can look at this

jscheuer1
06-06-2017, 05:05 PM
I don't notice anything near to a 4 or 5 second delay. But some delay is to be expected. The server is having to fetch the secondary content after page load begins. I see you have removed the cache: false directive*, that should speed things up, but perhaps your browser has that cached? Try CTRL - F5 while viewing the pages to clear and refresh them in your browser.

*but not from all of the pages, getting rid of that should help.

mcolton
06-06-2017, 06:51 PM
Thanks. I'll give that a try