Inserting Text Into HTML using JS – Help Please!

@sarapMar 31.2006

Hi there, I’m looking for some help with JavaScript (I don’t have PHP installed on my server so it needs to be a JavaScript solution).

I’m creating an Intranet for a company with offices in multiple countries using a portal building tool that takes several source files to create a single web page (kind of like frames but without using frames). So I have a header.html and navbar.html which appear on every page for a country and the various files that contain the main page content. Each of the files that comprise the main page content have a set of breadcrumbs on them to allow the user to understand how they got to where they are in the site and link to previous pages.

I would like to have some of the code in the breadcrumbs that is repeated on every page be defined in a separate file so I can make it reusable across different countries and the file location reference easily changeable (I’ll be moving it from a test environment to a production environment so it would be great to only have to change this information once). The breadcrumbs look like this to the user:

You are here: ~~[U]~~Home[/U] > ~~[U]~~Asia[/U] > ~~[U]~~Australia[/U] > ~~[U]~~Human Resources[/U] > ~~[B]~~Benefits[/B]

The HTML code behind it looks like this (I’ve made the pieces of HTML or text I want to be dynamic in different colors:

<!——————start breadcrumbs———>
You are here: <a href=”~~[COLOR=Red]~~http://intranet.co.com/[/COLOR]“>Home</a> > <a href=”~~[COLOR=Red]~~http://intranet.co.com/[/COLOR]asia/”>Asia</a> > <a href=”~~[COLOR=Red]~~http://intranet.co.com/[/COLOR]~~[COLOR=RoyalBlue]~~au[/COLOR]-home”>~~[COLOR=Green]~~Australia[/COLOR]</a> > <a href=”~~[COLOR=Red]~~http://intranet.co.com/[/COLOR]~~[COLOR=RoyalBlue]~~au[/COLOR]-hr”>HR</a> > <b>Benefits</b>
<!——————end breadcrumbs———>

I’d like to define the inserted text in a couple different places:

1) I’d like to define the ~~[COLOR=Green]~~country name[/COLOR] (Australia) and ~~[COLOR=RoyalBlue]~~country prefix[/COLOR] (au) defined in the header.html that appears on every page (alternately, I could also call a separate .js file from the header.html”)

2) I’d like to define the ~~[COLOR=Red]~~http location[/COLOR] in a separate file called “http.js” and call it from the header.html.

I have tried a few different things but realized I’m over my head on this one. Can anyone help?? Thanks! Sara

to post a comment

JavaScript

23 Comments(s) _↴

@phpnoviceApr 01.2006 — #No JavaScript is required to insert HTML into your page -- as long as your web host supports SSI (Server-Side Includes). All that is required from you to invoke SSI is to code your pages with an [b].shtm[/b] or [b].shtml[/b] file name extension. The following is an example of the kind of SSI statement that you would use to include additional HTML in your page:

@sarapauthorApr 02.2006 — #So are you saying that I should code it like this?



You are here: <a href="[COLOR=Red]#[/COLOR]">Home</a> >

<a href="[COLOR=Red]#[/COLOR]asia/">Asia</a> >

<a href="[COLOR=Red]#[/COLOR][COLOR=RoyalBlue]#[/COLOR]-home">[COLOR=Green]#[/COLOR]</a> >

<a href="[COLOR=Red]#[/COLOR][COLOR=RoyalBlue]#[/COLOR]-hr">HR</a> >

<b>Benefits</b>



And this will:

1) Insert either the http link, the country name or the country prefix from the file

2) Allow the breadcrumb links to work

Unfortunately, I tried this and it does not work. It's possible that the server does not allow SSI's. I will check.

thanks,

Sara

@phpnoviceApr 02.2006 — #This kind of stuff definitely will not work:

<a href="#">Home</a>

SSI is intended to insert one or more complete tag(s) worth of HTML -- not such pieces as you're posted. You really need to use server-side code to build things like what you posted.

@phpnoviceApr 02.2006 — #For a JavaScript solution, the following is about the best you're gonna get:

[code=html]<body>
 <script type="text/javascript>
 <!--//
 String.prototype.toWordCaps = function() {
 var ary = this.toString().toLowerCase().split(" ");
 var x, len = ary.length;
 for (x=0; x<len; ++x) {
 ary[x] = ary[x].substr(0,1).toUpperCase() + ary[x].substr(1);
 }
 return ary.join(" ");
 }
 var sURL = self.location.protocol+"//";
 if (self.location.protocol != "file:") sURL += self.location.host;
 var aURL = (self.location.href.substr(sURL.length + 1)).split("/");
 document.write('<p><a href="', sURL, '/">Home</a> &gt; ');
 for (var i = 0; i < aURL.length; ++i) {
 if (i < (aURL.length - 1))
 document.write('<a href="', sURL+=('/'+aURL[i]), '/">',
 unescape(aURL[i]).toWordCaps().replace(/s/g,"&nbsp;"), '</a> &gt; ');
 else if (i == (aURL.length - 1))
 document.write(document.title.toWordCaps().replace(/s/g,"&nbsp;"), '</p>');
 }
 //-->
 </script>
 ...etc...
 [/code]

@sarapauthorApr 03.2006 — #Thanks - I guess JavaScript may not provide me with the functionality I was hoping for then. ? I was hoping to set up the three text variables in a separate file and then call them in the breadcrumbs that appear on the main content pages. That way, I could change the text variables in one file and have it change on all the content pages.

I thought I had a solution which would insert the text by using a "javascript.write" but instead of the link working, when I clicked it, it would show me the actual text I wanted it to write. Someone told me I would have to do a submit() within the javascript link and add a <form> in the content page but I didn't understand how to do it. ?

If you have any other ideas, please let me know.

thanks, Sara

@phpnoviceApr 03.2006 — #For doing stuff like this with JavaScript:

[code=html]You are here: <a href="#<!-- include file="http_location.html" -->">Home</a> > 
 <a href="#<!-- include file="http_location.html" -->asia/">Asia</a> > 
 <a href="#<!-- include file="http_location.html" -->#<!-- include file="country_prefix.html" -->-home">#<!-- include file="country_name.html" --></a> > 
 <a href="#<!-- include file="http_location.html" -->#<!-- include file="country_prefix.html" -->-hr">HR</a> > 
 <b>Benefits</b>[/code]

You would have to code your variables in a JavaScript page like this:

var location_url = "...whatever...";
 var country_prefix = "...whatever...";
 var country_name = "...whatever...";

Then you could include that in your page as follows:

[code=html]<body>
 <script src="variables.js" type="text/javascript"></script>
 ...etc...[/code]

Following that, you could do something like this:

[code=html]<script type="text/javascript">
 <!--//
 var str = 'You are here: ';
 str += '<a href="#' + location_url + '">Home</a>';
 str += ' > ';
 str += '<a href="#' + location_url + 'asia/">Asia</a>';
 str += ' > ';
 str += '<a href="#' + location_url + '#' + country_prefix '-home">#' + country_name + '</a>';
 str += ' > ';
 str += '<a href="#' + location_url + '#' + country_prefix + '-hr">HR</a>';
 str += ' > ';
 str += '<b>Benefits</b>';
 document.writeln(str);
 //-->
 </script>[/code]

@sarapauthorApr 03.2006 — #Wow! That totally worked. Thank you! I had to take the # signs out because it was causing the entire path to the file to be included in the URL. This is AWESOME! Thanks!

[B]Question:[/B]

If I also wanted to make the various links within the main content files utilize the variables, do I have to put the entire page within the script??

For example, after the breadcrumbs, there could be a bunch of text and HTML and a link to go to another page in the site - then some more text/HTML and another link.

Example:

<table width=100% cellpadding=5 cellspacing=0 border=0>

<tr><td colspan=2>XX's mission is to be the <b>Greatest Company Ever</b><br>Below, you will find links to more information about our history and how we work today.</td

tr>

<tr>

<td valign="baseline"><img src="/images/icon_arrow.gif" width="18" height="9" border="0" alt=""></td>

<td><a href="[COLOR=Red]http://intranet.co.com[/COLOR]/[COLOR=RoyalBlue]au[/COLOR]-profile" class="largeLink">Company Profile</a><br>Text text text text text.</td>

</tr>

<tr>

<td valign="baseline"><img src="/images/icon_arrow.gif" width="18" height="9" border="0" alt=""></td>

<td><a href="[COLOR=Red]http://intranet.co.com[/COLOR]/[COLOR=RoyalBlue]au[/COLOR]-culture" class="largeLink">Company Culture</a><br>Text text text text text.</td>

</tr>

</table>

Again - thank you so much for the help and the time you have spent. I really appreciate it!

Sara

@phpnoviceApr 03.2006 — #I had to take the # signs out because it was causing the entire path to the file to be included in the URL.[/QUOTE]
Hey, I was just following what you originally posted. ?

Otherwise... No, I would not put your entire page into a script. Instead, you could have a function which executes, on page load, and goes through and examines all of your links for possible changes. That would use the following collection:

// document.links

alert("There are " + document.links.length + " links in this collection.");

@sarapauthorApr 03.2006 — #I'm not JavaScript savvy and so I don't realize the nuances of what I explain that I want to be done will affect the resulting code. Sorry - hope I haven't run you through the ringer.

So I'm getting greedy! After you showed me it could be done in the breadcrumbs, I realized it would make my whole process of making this HUGE Intranet so much easier if I could replace all the link tags using the variables you showed me how to set up.

You mentioned setting up a function. I would do this in the variables.js file right? I'm not sure how to do this. What if I don't have access to the <body> tag to do the "onload"? (That is something the portal building software inserts itself.)

thanks!!!!!

@phpnoviceApr 03.2006 — #You mentioned setting up a function. I would do this in the variables.js file right? I'm not sure how to do this. What if I don't have access to the <body> tag to do the "onload"? (That is something the portal building software inserts itself.)[/QUOTE]
Am I getting paid for this? ? Anyway... Yes, you can put this function in the variables.js file and you can move the inclusion of that file into the HEAD section of your document (and hook into the page [b]onload[/b] event from there). At least, I hope you can do that with the way your portal software is "interfering". ? Otherwise, you'll have to use two separate files -- because the variables.js needs to precede your breadcrumbs code and this function is going to end up having to be included at the [U]end[/U] of your BODY section.

@sarapauthorApr 03.2006 — #I know - thank you so much for all the great advice. This has been [B]extremely [/B] helpful to me. I guess I should invest some time to learn this stuff. It [I]KINDA [/I] makes sense but then my brain starts to hurt and that's that. I'm more of a creative type. ?

Ok, so I know that I can call the variables.js file in the first file that loads up (header.html). Not a problem. It will load up before the breadcrumbs file. But I think you said it needs to run [B]after [/B] the page has loaded. I do not have the ability to include a <body> or <head> tag in there. Do I need the <body> tag to do the onload? If not, should I put it above the breadcrumbs in the main content file in some sort of javascript tag like:

<script language="JavaScript" type="text/javascript">



</script>

Here is what I have for a function:

function changeText {

var base_url = "http://intranet.co.com";

var country_prefix = "au";

var country_name = "Australia";

}

Is that right?

Then, in the main document, is this how I call the function?

Example:





<table width=100% cellpadding=5 cellspacing=0 border=0>

<tr><td colspan=2>Below, you will find links to more information about our history and how we work today.</td>

</tr>

<tr>

<td><[COLOR=Red]a href="javascript:document.base_url + [/COLOR] " class="largeLink">Company Profile</a><br>Text text text text text.</td>

</tr>

<tr>

<td><[COLOR=Red]a href="javascript:document.base_url[/COLOR] + [COLOR=RoyalBlue]javascript:document.country_prefix +[/COLOR]-culture" class="largeLink">Company Culture</a><br>Text text text text text.</td>

</tr>

</table>



[B]Ugh.[/B] I know that isn't right. I just don't get it. If this is too much time for you, don't worry about it. I have the breadcrumbs working and that is so great. THANKS!

@phpnoviceApr 03.2006 — #I'm more of a creative type. ?[/QUOTE]
But that is what programming is all about -- being creative! ?

So... You will not need to use the window.onload event. Include these *four* variables at the beginning of your definitions:

var base_url = "...whatever...";

var location_url = "...whatever...";

var country_prefix = "...whatever...";

var country_name = "...whatever...";

Then, execute your breadcrumbs code.

Then comes all of your other HTML content.

Then, at the very end, include something like this code:

[code=html]
 <script type="text/javascript">
 <!--//
 function findFileNameString(href) { // return pos and len of file name
 var p, str = href;
 if(0<=(p=str.indexOf("#")))         // if hash present
 str = str.substr(0,p);          // remove hash+search
 else if(0<=(p=str.indexOf("?")))    // else if search present
 str = str.substr(0,p);          // remove just search
 return [p=str.lastIndexOf("/")+1, str.substr(p).length];
 }
 var p, coll = document.links;
 var x, len = coll.length;
 for(x=0; x<len; ++x) {  // loop on links collection
 if(0<=coll[x].href.indexOf(base_url)) { // find links to change
 p = findFileNameString(coll[x].href);
 coll[x].href = coll[x].href.substr(0,p[0])
 + country_prefix
 + coll[x].href.substr(p[0]);
 }
 }
 //-->
 </script>
 [/code]

@sarapauthorApr 03.2006 — #I definitely agree with you that programming is creative. I just don't have enough knowledge to be creative. I just end up feeling stupid. :o I really think I'm going to either get a book or take a class. I think my world would change a lot if I knew how to do this.

Thank you for all the help. I'm going to insert all the code now and give it a try. From looking at it, it seems like you are having it search for an href and then somehow input the variable information after the href, yes?

So when I write my HTML code and have a link, how do I write the href so the script can identify where the variable text should go?

<a href="javascript:document.base_url + javascript:document.country_prefix +-culture" class="largeLink">Company Culture</a>

like that???

@phpnoviceApr 03.2006 — #<a href="javascript:document.base_url + javascript:document.country_prefix +-culture" class="largeLink">Company Culture</a>

like that???[/QUOTE]
The code expects standard links. Given the following:

var base_url = "intranet.co.com";

var country_prefix = "au-";

the code should (because the code is untested ? ) find a link like this:

<a href="http://intranet.co.com/culture" class="largeLink">Company Culture</a>

and should (because the code is untested ? ) change it to this:

<a href="http://intranet.co.com/au-culture" class="largeLink">Company Culture</a>

@sarapauthorApr 03.2006 — #Ohhhh, ok. Got it.

Then when I move all my code from the test server to the production server (meaning my base_url would change to http://web.intranet.com)">http://web.intranet.com). Do I only need to change the base_url variable and it will update the new base URL within all the links in the HTML content or have you coded it so that the variable and the href link location need to match each other in order to append the country prefix??

Once again - thank you thank you!

@phpnoviceApr 04.2006 — #They have to match, but you should only have to change your variables document (same document name, but one variables document for your test server and another variables document for your production server). The reason is because, you normally don't actually hard-code the host domain in your links. In other words, instead of coding it like this:

<a href="http://intranet.co.com/culture" class="largeLink">Company Culture</a>

you would code it like this:

<a href="culture" class="largeLink">Company Culture</a>

But, internally, the browser changes such a link, when the link is rendered, by adding the rest of the parts of the url.

@sarapauthorApr 04.2006 — #Hi,

I did what you said and removed the host domain from the links and it didn't insert the base_url and country prefix for some reason.

<a href="culture" class="largeLink">Company Culture</a>

However, when I included the host domain, it did insert the country_prefix like magic right after the base_url:

<a href="http://intranet.co.com/culture" class="largeLink">Company Culture</a>

Unfortunately, it also included the country_prefix I didn't want it to be included - for example, in the case where I wanted a link to go to: http://intranet.co.com/home/" - it inserted the country prefix to make it http://intranet.co.com/home/au".

I think I will just be happy that the breadcrumbs are working beautifully and not waste anymore of your time. You have been [B]more [/B] than generous. I really do appreciate it so much!

@AltF4Apr 04.2006 — #phpnovice is close

@phpnoviceApr 04.2006 — #I did what you said and removed the host domain from the links and it didn't insert the base_url and country prefix for some reason.

<a href="culture" class="largeLink">Company Culture</a>

However, when I included the host domain, it did insert the country_prefix like magic right after the base_url:

<a href="http://intranet.co.com/culture" class="largeLink">Company Culture</a>

Unfortunately, it also included the country_prefix I didn't want it to be included - for example, in the case where I wanted a link to go to: http://intranet.co.com/home/" - it inserted the country prefix to make it http://intranet.co.com/home/au".[/QUOTE]
Why don't you come up with some of your own brilliant ideas for a change? ? At any rate... The final alternative is to place some kind of flag on the links that you want changed -- so that other links won't get touched and it won't matter whether the host domain is presente or not.

For example -- a fake class name won't otherwise interfere:

<a href="culture" class="largeLink dynalink">Company Culture</a>

What do you think?

@AltF4Apr 04.2006 — #Dang sorry to get you mad!

@phpnoviceApr 04.2006 — #sorry to get you mad![/QUOTE]
Who's mad? I don't see anybody mad 'round here. 'Specially not me. ? I'm just having fun. ?

@phpnoviceApr 04.2006 — #Unfortunately, it also included the country_prefix I didn't want it to be included - for example, in the case where I wanted a link to go to: http://intranet.co.com/home/" - it inserted the country prefix to make it http://intranet.co.com/home/au".[/QUOTE]
So, using the suggestion I just made, you would change this line in the code I posted previously:

if(0<=coll[x].href.indexOf(base_url)) { // find links to change

to this:

if(coll[x].className

&& 0<=coll[x].className.indexOf('dynalink')) { // find links to change

@AltF4Apr 04.2006 — #funny

Also in #JavaScript _↴

Looking for help with a script to control access to parts of my site AJAX - how to push output to <input /> field How to display a webpage from another domain in our web page and access its elements

Success!

Help @sarap spread the word by sharing this article on Twitter...

Tweet This

Inserting Text Into HTML using JS – Help Please!

23 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Inserting Text Into HTML using JS – Help Please!

23 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #JavaScript _↴