External Javascript File Problem

**mikedj** · 02-11-2006, 04:54 PM

I'm having trouble with javascript functions using an external .js file. I've implemented one of Matt Kruse's Javascript PopUp Calendar's, but can't seem to get it working on the server. It works fine on my local machine in both IE and Firefox, but when I upload it to the server I get two errors when the page loads; "getCalendarStyles is not defined" and "CalendarPopup is not defined". The html page is generated from a perl script in the cgi-bin folder and that is where the CalendarPopup.js file is located. I've tried changing permissions on the file and adding a full absolute path to the file, with no success. The code I am using in the <head> is shown below. It seems like the .js file is not being loaded, but I'm not sure how to force it to load. Is there something that needs to be configured on the server for this to work? I see that .js files are listed in the default MIME types, which I assumed was all that was needed.

Thanks,
Mike Johnson

<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">document.write(get CalendarStyles());</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" ID="jscal10">
var cal10 = new CalendarPopup("caldiv");
cal10.setReturnFunction("setMultipleValu es2");
function setMultipleValues2(y,m,d) {
var date = new Date(y,m,d);
var wday = date.getDay();
var days = new Array("Sunday","Monday","Tuesday","Wedne sday","Thursday","Friday","Saturday")
var months=new Array("January","February","March","Apri l","May","June","July","August","Septemb er","October","November","December");
document.forms[0].date10_year.value=y;
document.forms[0].date10_month.value=(months[m-1]);
document.forms[0].date10_date.value=LZ(d);
document.forms[0].date10_wday.value=(days[wday]);
}
</SCRIPT>

**Vin DSL** · 02-11-2006, 05:24 PM

This probably won't do a dern thing, but:

Code:

LANGUAGE="JavaScript"

...is deprecated. I use:

Code:

type="text/javascript"

It's a longshot, but you never know. I doubt it will make any difference, but that needs to be changed anyway, if you plan to be W3C compliant...

**mikedj** · 02-11-2006, 05:36 PM

Why, of course I want to be W3C compliant! And thanks to you, this script is now compliant (at least that part of it). However, you were right, it didn't do a dern thing to solve my problem. But, please, keep working on it!!

Thanks,
Mike

**Vin DSL** · 02-11-2006, 05:44 PM

Originally Posted by mikedj

Why, of course I want to be W3C compliant! And thanks to you, this script is now compliant (at least that part of it). However, you were right, it didn't do a dern thing to solve my problem. But, please, keep working on it!!

Heh!

Well, I have to work all night, so I'll 'think on it' while I'm toiling away at 2:00 AM.

In the meantime, maybe someone else will pop in here with a fix...

**Spathiphyllum** · 02-11-2006, 06:31 PM

Assuming there are no typos or misplaced spaces in the code, I'd do the following. In the xHTML header, place this link to external, case-sensitive *.js file. (The path should probably be relative to domain root, but you could define it explicitely using a FQDN.)

Code:

<script src="CalendarPopup.js" type="text/javascript"></script>

Then, move this into the top of the xHTML body.

Code:

<script type="text/javascript">
<!--
document.write(get CalendarStyles());
// -->
</script>
<script type="text/javascript" id="jscal10">
<!--
var cal10 = new CalendarPopup("caldiv");
cal10.setReturnFunction("setMultipleValues2");
function setMultipleValues2(y,m,d) {
  var date = new Date(y,m,d);
  var wday = date.getDay();
  var days = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
  var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
  document.forms[0].date10_year.value=y;
  document.forms[0].date10_month.value=(months[m-1]);
  document.forms[0].date10_date.value=LZ(d);
  document.forms[0].date10_wday.value=(days[wday]);
}
// -->
</script>

This ensures that the browser gets a few more moments to load the external *.js file containing the necessary functions. Next, as the body text loads, it calls, in sequence, the inline javascripts before the rest of the document object is created. The warning messages you are getting mean that the two functions are a) not being found at all, or b) are not being found/parsed in time for the inline javascript to use them. Changing the load order a bit may help resolve this problem. Also, the code as written should be W3C compliant.

Another check to consider. Are you uploading the *.js as ASCII text? If your agent uploads by default, it may bet set to consider *.js as binary, in which case the server will assign an improper MIME type and the browser will not interpret the code properly - hence failed function access.

This may help but no guarantees. We may need to see the external code too.

**mikedj** · 02-11-2006, 07:37 PM

There were two misplaced spaces in the code that I pasted in my original message, but they were only present in the post on this forum, not in my actual code (CalendarPopup.js and getCalendarStyles).

I did not have my FTP client set to upload .js files as ASCII. However, changing that didn't help.

I moved the code as you suggested - still no joy.

Since it seems like it simply isn't getting the code from the external file, I decided to try opening the file and printing the full CalendarPopup.js script in the head of my html document using this code:

Code:

print qq*<SCRIPT type="text/javascript">*;

	open JAVASCRIPT,"CalendarPopup.js";
	@js = <JAVASCRIPT>;
	close JAVASCRIPT;
	foreach $line (@js) {
		print $line;
	}

	print "</SCRIPT>";

It works fine that way. I don't know what drawbacks that has, other than if I view the page source for that page it is very long.

The CalendarPopup.js file I used is unmodified from the way it was posted by Matt Kruse and can be found here:

http://www.mattkruse.com/javascript/...lendarPopup.js

Though it is functioning, I would appreciate any further thoughts on what might be wrong with the original method, which, from all I can find, should be a correct way to do it.

Thanks for you help,
Mike

**jason** · 02-11-2006, 08:52 PM

The JPC servers are set up to try and execute anything you place in the cgi-bin directory as a CGI script, regardless of file extension. Since the JS file is not a valid cgi, Apache throws a 500 error instead of sending the file, so the browser never sees the functions that it is trying to call. Move the file outside your cgi-bin and you should be fine. You can also run files that end in .cgi or .pl as CGI scripts in a directory, so if you want to keep the cgi and js files in the same directory, you can move the cgi as well.

Originally Posted by mikedj

I don't know what drawbacks that has, other than if I view the page source for that page it is very long.

Using the external file allows the browser to cache the contents so that it doesn't have to get all of the code every time the page loads. If there's a lot of code in the file you could see a noticable difference in download time on a slow connection. If you use that same code in multiple places on your site the benefit of using an external file is obvious.

As for keeping tha code inline, other than the reasons mentioned above, I don't think you'll see any adverse effects.

--Jason

**mikedj** · 02-12-2006, 06:17 AM

A thousand thank yous. Very clear explanation and, best of all, it worked like a charm.

Thanks for taking the time to explain it.

Mike

**Frank Broughton** · 02-12-2006, 11:14 AM

That Jason sure is sharp aye Mike!

**mikedj** · 02-13-2006, 12:24 PM

Jason, and the others on this forum, have been a valuable resource. I have learned plenty from them. Their participation here is much appreciated.

Mike

**jason** · 02-13-2006, 09:26 PM

Originally Posted by mikedj

A thousand thank yous. Very clear explanation and, best of all, it worked like a charm.

Thanks for taking the time to explain it.

Mike

You're welcome. Glad you were able to slove the problem.

--Jason

LinkBack

Thread Tools

Display

External Javascript File Problem

Bookmarks

Bookmarks

Posting Permissions