Skip to main content

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements.




We can do the same thing with the plain old html and javascript.



But how?

First you need to create the site main layout using divs and give them unique ids.



<html>
<title>HTML Includes</title>
<script language="javascript" src="js/main.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script language="javascript" xml:space="preserve">
    // <![CDATA[
    Event.observe(window, 'load', loadCalls);
    // ]]>
</script>
<link type="text/css" href="css/main.css" rel="stylesheet"/>
<body>
<div class="page-sizer">
    <div class="header" id="header"></div>
    <div><div class="leftMenu" id="leftMenu"></div><div class="content" id="content"></div></div>
    <span style="clear:both;" />
    <div class="footer" id="footer"></div>
</div>
</body>
</html>



Also you'r gonna need a javascript library like prototype, Jquary, YUI. You don't have to have the whole library to do this. You only needs to have the files to make an ajax call. I am going to use prototype for my example but using other libraries wouldn't make much difference. So what I simply do is to access each div element and fetch it's content from a separate file and fill them. 




function loadCalls() {
    //Load the pages one by one to the divs
    loadPages('common-pages/footer.html','footer');
    loadPages('common-pages/header.html','header');
    loadPages('common-pages/leftMenu.html','leftMenu');
    loadPages('content/default.html','content');

}
function loadPages(path,loadToId){
     //IE cache the response when the request parameters are the same
    //So We send a random parameter weith the request
    var random = Math.floor(Math.random() * 2000);

    new Ajax.Request(path+'?rand=' + random,
    {
        method:'get',
        evalScripts: true,
        parameters:{random:random},
        onSuccess: function(transport) {
            document.getElementById(loadToId).innerHTML = transport.responseText;
        },
        onFailure: function() {
            setError('Problem with loading the file');
        }
    });
}

And from the menu file I am loading each page to the “content” div as follows.



<a onclick="loadPages('content/page01.html','content');">page1</a>

You can download the complete source code from here http://sites.google.com/site/chanaka3d/Home/html-include.zip?attredirects=0


Note: This method will not work in IE if you are not hosting it in a sever. But in Firefox it doesn't necessarily need a sever to work.

Comments

Post a Comment

Popular posts from this blog

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'
Post a Comment
Read more

Making of my Fist Game ( Angry Wives )

My Fist Game !!! Finally I was able to finish it. It's been two and half years since I start investing my extra time on this. It all started with a joke. My current working place is a real fun place to work. We usually hangout on teatime and through out any thing we got on each other. We use to sit on a circle and pick a subject and laugh the guts out. Ones we were talking about a particular slow server, we thought about letting the users play a game while it loads. Game like Angry Birds. Then an idea came to modify the Angry Birds game to something like Angry Babes. So instead of this birds there are hot hot girls flying and killing dudes inside building blocks. Then I started wondering, " What if this can be done for real? " "How practical is this?" "Can a single person do this?" I think I have done a research on mobile game purchase statistics, it turns out to be IOS users have more trend over buying stuff than Android users. So IOS wa
Post a Comment
Read more

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to
Post a Comment
Read more