Partial render in HTML/JavaScript

If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.

http://docs.angularjs.org/#!/api/ng.directive:ngInclude


If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.

Have a look at the jQuery 'load()' function here:

http://api.jquery.com/load/

Assuming your have the following html:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

your usage would look something like this:

$('#header').load('header.html');
$('#footer').load('footer.html');

Here's a link (first one from Google I might add) that explains how to do this in various languages.

Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.

PHP:

<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>

ASP:

<!--#include file="path to file/include-file.html"-->

JS:

JavaScript is another way to include HTML within the pages of your site. This has the advantage of not requiring server-level programming. But it's a little more complicated than the server-level include methods.

  1. Save the HTML for the common elements of your site to a JavaScript file. Any HTML written in this file, must be printed to the screen with the document.write function.

  2. Use a script tag to include the JavaScript file on your pages.
    <script type="text/javascript" src="path to file/include-file.js">

  3. Use that same code on every page that you want to include the file.

PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.

Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).

If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:

<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>

DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.

Tags:

Javascript

Html

Partial

Recent Posts