Display SSI Data in Local View

A Javascript Solution

Back in June 2008, I posted a note to the Freepages Help List describing a method to display locally your Server Side Includes data.

https://lists.rootsweb.com/hyperkitty/th/read/Freepages-Help/2008-06/1214599681

Since then I have received positive 'feedback' on the Javascript method I used, along with some requests for a more detailed explanation of the 'how to' in getting it to work. The description that follows assumes you have already implemented SSI and your navigation data is saved as a .txt file to the server. Example nav file:-

<div id="nav">
<p class="nav_hdg">Navigation</p>
<a href="http://mydomain.com/elements/">Create New Elements</a><br>
<a href="http://mydomain.com/corners/">Cute Corners</a><br>
<a href="http://mydomain.com/encryptor/">Encrypt Email Address</a><br>
<a href="http://mydomain.com/filezilla/">FileZilla FTP</a><br>
<a href="http://mydomain.com/ieftp/">Internet Explorer FTP</a><br>
</div>

The above navigation is using 'absolute links' and there lies the first problem. Any local navigation using those links will point at the urls concerned and not the local file which you may have been working with. This is where using Javascript for your local navigation will have its greatest benefit - though you need to remember when changing the SSI .txt file to remake the equivalent .js file using the relative links.
TIP!!.. This duplication can be avoided if you use 'relative' navigation throughout your site - keeping your local web folders matching the server directories.

We now have a relative link file as follows:-

<div id="nav">
<p class="nav_hdg">Navigation</p>
<a href="../elements/new_element.html">Create New Elements</a><br>
<a href="../corners/corners.html">Cute Corners</a><br>
<a href="../encryptor/encryptor.html">Encrypt Email Address</a><br>
<a href="../filezilla/filezilla.html">FileZilla FTP</a><br>
<a href="../ieftp/ieftp.html">Internet Explorer FTP</a><br>
</div>

Note that the navigation is all up one level, then to a new directory and file name. Locally I use separate names to avoid confusion when having more than one 'index' file sitting in the tabs of the text editor at the same time. The file name is changed to index.html after it has been placed on the server.

Its now time to convert the HTML data into Javascript. This entails 'escaping' forward slashes '/' by preceding them with a back slash '\' and writing one line at a time. Thankfully, we have an online converter available to do this for us; so go to - http://www.accessify.com

1.. Uncheck the "Include <script> tags" box.
2.. Select the "Build up a string variable that you can use later" radio button
3.. In the "variable name" textbox type e.g. strLeftNav
4.. Copy & Paste your Local Nav file into the text box.
5.. Click "Convert to Javascript" which will output in the next textbox:-

var str='strLeftNav';
strLeftNav +='<div id="nav"> ';
strLeftNav +='<p class="nav_hdg">Navigation<\/p>';
strLeftNav +='<a href="..\/elements\/new_element.html">Create New Elements<\/a><br>';
strLeftNav +='<a href="..\/corners\/corners.html">Cute Corners<\/a><br>';
strLeftNav +='<a href="..\/encryptor\/encryptor.html">Encrypt Email Address<\/a><br>';
strLeftNav +='<a href="..\/filezilla\/filezilla.html">FileZilla FTP<\/a><br>';
strLeftNav +='<a href="..\/ieftp\/ieftp.html">Internet Explorer FTP<\/a><br>';
strLeftNav +='<\/div>';
document.write(strLeftNav);

NOTE: Code to the left added per #6 in instructions below.

6.. On a new line at the bottom of the script in the textbox, type document.write(strLeftNav);
7.. Click in the text box then Ctrl +A (to highlight all the text), then Ctrl +C
8.. Open a page in Notepad (or your text editor) and Ctrl +V to paste the contents.

Now save the contents using the same name as your SSI .txt file but with the .js extension.

You should now add to all your pages where you have the SSI #include file the script tags and source of the new .js file. This should look similar to the following:-

<script" src="../objects/fixed_nav_local.js"></script>

Remember!! The Javascript file is NOT loaded to the server, else you will finish up with two menus.

Also, when viewing the source code of a page from your local folders in which the SSI information is showing, you will see both the #include and Javascript code lines shown in the previous paragraph. But, when viewing the server delivered file source, the #include will be replaced with the actual HTML and though the Javascript link is shown, with the file not on the server, it doesn't run.

Barry Carlson - June 2008