-3

I am looking to have a chunk of html containing a heading which i want to reuse across multiple html pages.

I have tried the EXACT code but it doesn't seem to work. it is displaying the script in HTML rather than actioning it.

index.html:

    <html>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <h1>This is a test</h1>

   <script>$("#content").load("commonContent.html");</script>

    </html>

commonContent.html:

<div id="content"><h2>If this shows my test worked!</h2></div>

Any suggestions would be much appreciated. Please note i am a newbie to javascript!

Jess Murray
  • 1,273
  • 1
  • 10
  • 32

2 Answers2

1

You need:

  1. To include the jQuery library since your script depends on it
  2. To put your script inside a <script> element
  3. To put an element in the document in which you will load the content (you are trying to use one with id="content" but no such element exists).

I'd recommend using a server side or build time template system instead though. They are more reliable and better food for search engines.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 3
    3. Define an element with ID "content". 0. Write valid HTML – Jonathan Mar 02 '15 at 22:11
  • @Jonathan — Good spot. – Quentin Mar 02 '15 at 22:12
  • @Jonathan Hi, Isn't that what i have done in my commonContent.html? – Jess Murray Mar 02 '15 at 22:20
  • @Quentin Thanks for your comment. I have now edited my doc to add – Jess Murray Mar 02 '15 at 22:22
  • @JessMurray Yes, but that won't help: http://api.jquery.com/load/. Please just start by reading the basics of writing valid HTML. – Jonathan Mar 02 '15 at 22:23
  • @Jonathan — You can't load `commonContent.html` into a div that is on `commonContent.html` and not in the current page. The jQuery website includes instructions on how to set up jQuery for your site. – Quentin Mar 03 '15 at 07:53
0

For this type of thing I usually use php like this:

<?php include("youhtmlfile.html"); ?>

It is an advantage because this way you don't have to worry about browser support.

www139
  • 4,960
  • 3
  • 31
  • 56
  • Hi, I tired this and it didn't to work. With research i also tried: – Jess Murray Mar 04 '15 at 21:27
  • what's the content of your html file? when you tested out my code was your html file the same as in the example in your question? Do you have php installed? – www139 Mar 05 '15 at 01:28
  • You've forgotten some key aspects that need to be addressed for this to work. I have edited your answer to properly display this – tisaconundrum Jan 17 '17 at 14:51