Pulling in an .js file into another .js file

**ccscull** · 09-29-2010, 04:01 PM

I have a left sidebar item that has diffrent designs but needs to pull in the same content in one section of it. I tried to separate out the code for that element and then pull it into the rest of the design. It shows up but not where it needs to, it shows up after the end of the .js file it is being pulled into.

My question would this be possible or even a good idea? What I want is to have one file to update instead of 3. Here is the code for both .js files.

Main sidebar code in the .js file

Code:

document.write('<div id="left_blue_table"><ul id="leftnavulblue">'
  + '	<script language="JavaScript" src="/javascript/newslistings.js"></script></ul>'
  + '	</div><img src="http://www.arrow.com/images/bluesidenavftrGRY.gif"><div style="background-image:url(http://www.arrow.com/images/bluesidebtmGRYbkgrnd.gif); background-repeat:repeat-y; width:185px; padding-top:0px; padding-bottom:0px">'
  + '	'
  + '	    '
  + '	<table width="175" border="0" cellpadding="0" cellspacing="0">'
  + '	<tr><td width="5px" height="0"> </td>'
  + '	<td colspan="2"><strong>Fast Facts</strong><br><br></td></tr>'
  + '	<tr><td width="10px"> </td><td width="5"> </td><td width="159" style="font-size:7pt"><strong>Ticker Symbol: </strong>ARW (NYSE)<br>'
  + '	<strong>2008 Sales:</strong> <br>'
  + '	<strong>Worldwide locations:</strong> <br>'
  + '	<strong>Fortune 500 Ranking:</strong> <br>'
  + '	<strong>Suppliers Worldwide:</strong> <br>'
  + '	<strong>Customers Worldwide:</strong> <br>'
  + '	<strong>Industry:</strong> Distribution<br>'
  + '	<strong>Founded: </strong><br>'
  + '	<strong>Incorporates:</strong><br>'
  + '	<strong>Public:</strong> </td></tr></table><br><img src="http://www.arrow.com/images/bluesidebtmGRYbtm.gif"></div>');

The code from the file I am pulling into the above (newslistings.js)

Code:

document.write('<li id="leftnavli">Test</li>');

**jscheuer1** · 09-29-2010, 04:26 PM

You're pulling what where? What's it gonna look like once it's pulled in? Which is the script that's subject to change? If it's the first one (making it the puller), adding the second one (the pullee) into each version of the first is no big deal, do it manually.

A server side include would be good though, got PHP? The puller script's extension would be changed to .php (also in the script tag for it on the page(s) using it) and an include command placed in it to get the pullee script (let's call it somefile.js):

main.php (a javascript file):

Code:

<?php
Header("content-type: application/x-javascript");
?>
some javascript code;
<?php include 'somefile.js'; ?>
more javascript code;

Other than that, if one follows the other, just use separate script tags on the page that uses this.

**ccscull** · 09-30-2010, 03:45 PM

Don't have PHP. Can't do anything serverside. I am pulling a javascript include file called newslistings.js into another javascript include file. The first chunk of code is the javascript include that I am pulling newslistings.js into. The newslistings.j file code is the second chunk of code. It works put the newslistings.js shows up in the wrong place. It doesn't show where I have it in the code, it shows up after the code.

Basically what I am doing is putting the design of the side bar in one include (there is more then one design) and then there will be News links that need to show up on the diffrent designs. The reason I want the news items in their own include is because I want to update them in only one file. The reason I am puting the sidebar design in the include is because It will be changing periodically and I do not want to have to update all the pages on the site (it's html not asp).

**jscheuer1** · 09-30-2010, 04:31 PM

OK, that gives me more of a clue. Since this is all client side code, I could tell a lot by actually seeing it:

I need a link to a page that shows the problem happening (it can just be an orphan page somewhere on your site/the net, doesn't have to be linked to or from your other pages). Otherwise it would be just a shot in the dark and/or a game of twenty questions trying to solve this issue for you, much less solve it.

That said, the first of the twenty questions would be:

Since there technically is no "javascript include" per se, just what are you doing to pull this other script in?

My thinking being that whatever method you are using, either it and/or the code it is bringing in, and/or the receiving code can probably be change to make it work as required.

But I'll probably still need a link to an example:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**ccscull** · 09-30-2010, 10:57 PM

Here is a link to a mock up of what I currently have...I have to update the News Links in 3 js files
http://www.arrow.com/testing/SidebarTest.html

Here is a link to how I would like to set it up. So I only have one place to update.
http://www.arrow.com/testing/SidebarTest.html

**jscheuer1** · 10-01-2010, 03:26 PM

Those two links in your post are both to the same page. But I think I see what you're trying to do anyway. If I write all three scripts to the page I see that this and only this:

Code:

'	<li id="leftnavli"><A href="#" class="leftnav">News Link 1</A></li>'
  + '	<li id="leftnavli"><A href="#" class="leftnav">News Link 2</A></li>'
  + '	<li id="leftnavli"><A href="#" class="leftnav">News Link 3</A></li>'

appears three times, once in each of them.

Before I give you an answer, there are at least three problems with what you already have:

There can only be one element per page with a given id. If this is violated for styling purposes only, browsers will have no problem. However, if in javascript you later try to manipulate, or even find these elements by their id, there will almost certainly be problems.
The attribute language="JavaScript" of your script tags has been deprecated. It's no longer required, and will cause problems in some situations. The attribute type="text/javascript" is required in all modern DOCTYPES, except HTML 5, where it's the default if none is specified. You use a DOCTYPE that requires this attribute for the script tag.
The newslistings.js script writes out invalid HTML code (li's with no parent ul element).

Depending upon what you do in the future, #1 is potentially the most serious, though some browsers might ignore your scripts entirely now due to #2. The 3rd issue could be fixed by inluding the opening and closing ul tags in the variable newslinks and removing these tags from the two scripts that have them in the code below.

OK, here's a solution, make another script. Let's call it newsItems.js, and in it we put:

Code:

var newslinks = '	<li id="leftnavli"><A href="#" class="leftnav">News Link 1</A></li>'
  + '	<li id="leftnavli"><A href="#" class="leftnav">News Link 2</A></li>'
  + '	<li id="leftnavli"><A href="#" class="leftnav">News Link 3</A></li>';

Put the script tag for it on the page before any of the other three scripts.

Change leftsidenewsfacts.js to:

Code:

document.write('<div id="left_blue_table"><ul id="leftnavulblue">'
  + newslinks
  + '	</ul>'
  + '	</div><img src="http://www.arrow.com/images/bluesidenavftrGRY.gif"><div style="background-image:url(http://www.arrow.com/images/bluesidebtmGRYbkgrnd.gif); background-repeat:repeat-y; width:185px; padding-top:0px; padding-bottom:0px">'
  + '	'
  + '	    '
  + '	<table width="175" border="0" cellpadding="0" cellspacing="0">'
  + '	<tr><td width="5px" height="0"> </td>'
  + '	<td colspan="2"><strong>Fast Facts</strong><br><br></td></tr>'
  + '	<tr><td width="10px"> </td><td width="5"> </td><td width="159" style="font-size:7pt"><strong>Ticker Symbol: </strong><br>'
  + '	<strong>2008 Sales:</strong> $1 billion<br>'
  + '	<strong>Worldwide locations:</strong> 150<br>'
  + '	<strong>Fortune 500 Ranking:</strong> <br>'
  + '	<strong>Suppliers Worldwide:</strong> 600<br>'
  + '	<strong>Customers Worldwide:</strong> 100,000<br>'
  + '	<strong>Industry:</strong> <br>'
  + '	<strong>Founded: </strong><br>'
  + '	<strong>Incorporates:</strong>1946<br>'
  + '	<strong>Public:</strong> 1961<br></td></tr></table><br><img src="http://www.arrow.com/images/bluesidebtmGRYbtm.gif"></div>');

Change leftsidenews.js to:

Code:

document.write('<div id="left_blue_table"><ul id="leftnavulblue">'
  + newslinks
  + '	</ul><img src="http://www.arrow.com/images/bluesidenavftr.gif"></div>');

and newslistings.js to:

Code:

document.write(newslinks);

Notes: I said this is 'an answer', 'a solution'. That's because there are other ways of going about this. I believe this approach is the closest to what you already are doing though. It might not be the best. It doesn't correct the use of multiple elements with the same id. Since doing so would affect your style, I will leave it to you to fix that. I would suggest changing id="leftnavli" to class="leftnavli" and then changing:

Code:

#leftnavli {
	padding-right: 0px; 
	padding-left: 0px; 
	margin-bottom: 10px; 
	padding-bottom: 0px; 
	padding-top: 0px; 
	list-style-type: none
}

to:

Code:

.leftnavli {
	padding-right: 0px; 
	padding-left: 0px; 
	margin-bottom: 10px; 
	padding-bottom: 0px; 
	padding-top: 0px; 
	list-style-type: none
}

Something similar should also be done about the use of the ids left_blue_table and leftnavulblue.

**ccscull** · 10-04-2010, 04:37 PM

Thanks for your help. I will try it how you suggested. One question. In your opinion is this a bad way to do this? I was considering putting the design part directly in the pages (the info in leftsidenews.js and newslistings.js ). I would prefer not to but it is an option.

It would mean that I would have to update all pages on the site if I changed the design of the sidebar but I was wondering if that would be a better way of doing this in the long run. My conserns are browser compatablity and future updates.

Thread: Pulling in an .js file into another .js file

Thread Tools

Search Thread

Pulling in an .js file into another .js file

Bookmarks

Bookmarks

Posting Permissions