Referencing a Javascript File In a Master Page

haplesscoder · Post by **haplesscoder** » Thu Jan 17, 2013 1:34 pm

This is in HTML5 output...

I need to include a custom javascript file on every page so can add <script src="foo.js"></script> in the <head> section of the master page.

The questions are:
- Where in the project should foo.js live?
- The help topics are scattered at multiple directory levels so there is no canonical relative path and for other reasons I can't use absolute paths. Is there a magic incantation what will cause Flare to generate the correct relative path to foo.js when the topic for each topic is generated?

My initial try was:
Content/Resources/Scripts/foo.js
Content/Resources/MasterPages/masterpage.flmsp
<script src="../Scripts/foo.js">

But that just generated lots of errors during output indicating that it thought that there were lots of Scripts/foo.js littered throughout my content.

Any help is greatly appreciated.

Post by **NorthEast** » Fri Jan 18, 2013 1:08 am

Well, there's good and bad news.

The good news is that you can include the script tag in the master page, and Flare will automatically resolve all the relative paths.

The bad news is that you would do it in exactly the way that you've just described; i.e. in the master page have:

Code: Select all

    <head>
		<script src="../Scripts/foo.js"></script>
    </head>

haplesscoder · Post by **haplesscoder** » Tue Jan 22, 2013 6:16 pm

Thanks Dave,

Indeed, Flare is correctly resolving the pats and putting in the correct number of ../../../to-the resources.

Unfortunately I'm still getting "Missing linked source file C:\blah\blah\blah\Resources\Scripts\foo.js" on every page. I've checked the output and Scripts\foo.js is being copied to the output and everything seems to be working (except for the other issues I'll bring up in a minute). Is that the bad news you were mentioning? What is that error trying to tell me?

Now for the other issues. foo.js of course isn't really foo.js. It's really the jQuery fancybox plugin. I bet you can guess where this is going.

- It has its own stylesheet but the <link rel="stylesheet" type="text/css" href="../fancybox/fancybox.css" /> appears to be stripped out of the output. Any suggestions?

- All of the Flare scripts are added after the ones in the master page. Can't really have a jQuery plug-in coming before jQuery itself. I could doc.write in the script tags except then I'd need to be able to figure out the correct relative path.

Thanks

Post by **NorthEast** » Wed Jan 23, 2013 3:12 am

haplesscoder wrote:Thanks Dave,

Indeed, Flare is correctly resolving the pats and putting in the correct number of ../../../to-the resources.

Unfortunately I'm still getting "Missing linked source file C:\blah\blah\blah\Resources\Scripts\foo.js" on every page. I've checked the output and Scripts\foo.js is being copied to the output and everything seems to be working (except for the other issues I'll bring up in a minute). Is that the bad news you were mentioning? What is that error trying to tell me?

The bad news is that I can only reproduce that error when the script link path or filename is incorrect. The path is relative from your MasterPages folder to the Scripts folder in your source files. Are the script links in the output files ok? e.g. <script src="Resources/Scripts/foo.js">

haplesscoder wrote:Now for the other issues. foo.js of course isn't really foo.js. It's really the jQuery fancybox plugin. I bet you can guess where this is going.

- It has its own stylesheet but the <link rel="stylesheet" type="text/css" href="../fancybox/fancybox.css" /> appears to be stripped out of the output. Any suggestions?

- All of the Flare scripts are added after the ones in the master page. Can't really have a jQuery plug-in coming before jQuery itself. I could doc.write in the script tags except then I'd need to be able to figure out the correct relative path.

Perhaps add the the jQuery script link in the body section of the master page (instead of head), after the topic body proxy.

If you set a master stylesheet, Flare will remove all stylesheet links in the output topics, and only include a link to the master stylesheet.
As you use multiple stylesheets, make sure the master stylesheet is set to (default) in both the target properties and project properties.

i-tietz · Post by **i-tietz** » Wed Jan 23, 2013 9:58 am

This is my MasterPage:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
			<script type="text/javascript" src="headermanagement.js"></script>
			<script type="text/javascript">
				<!--
				window.onload = fctname1;
				window.onresize = fctname2;
				-->
			</script>
		</head>

<body id="topic">
		<div id="toolbaroben" class="toolbardiv">
			<MadCap:topicToolbarProxy class="aw_toolbar" />
		</div>
		<MadCap:bodyProxy />
	</body>
	<span id="laenge"></span>
</html>

When I build the HTML Help and open it, I get a scripting message telling me that "fctname1" is undefined ...

This is the source code I get for the <head> from Flare in each HTML Help topic:

Code: Select all

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /><title>Dummy</title>
        <script type="text/javascript">
            <!--
				window.onload = fctname1;
				window.onresize = fctname2;
				-->
        </script>
        <link href="SkinSupport/MadCap.css" rel="stylesheet" />
        <link href="Resources/Stylesheets/dummy.css" rel="stylesheet" />
        <script src="SkinSupport/MadCapMerging.js"></script>
        <script src="SkinSupport/MadCapAliasFile.js"></script>
        <script src="SkinSupport/MadCapUtilities.js"></script>
        <script src="SkinSupport/MadCapBody.js"></script>
        <script src="SkinSupport/MadCapHighlighter.js"></script>
        <script src="Resources/MasterPages/headermanagement.js"></script>
    </head>

I see that Flare swapped the order of lines I inserted: First the events then the javascript is connected ... is that a bug of Flare or am I missing something?

If I use that construction outside of Flare and open the help in the ordinary IE, everything works just fine!
It also works fine WITH Flare when I insert the whole javascript into the script tags instead of linking to the js file ...

Psider · Post by **Psider** » Wed Jan 23, 2013 9:16 pm

Can you confirm that the headermanagement.js file is in the same folder as your Master Page?

If not, assuming that headermanagement.js is in your Resources/Scripts folder, I believe the path in your source should be src="../Scripts/headermanagement.js" .

HTH,
Amber

i-tietz · Post by **i-tietz** » Thu Jan 24, 2013 2:27 am

jep. beside each other.
I tend to put files that depend on each other as close together as possible. - Makes mistakes like the one you presumed a lot more improbable.

Psider · Post by **Psider** » Thu Jan 24, 2013 5:24 pm

One other thought. Does it work if you compile as webhelp? Perhaps it's a bug in HTML5 output.

i-tietz · Post by **i-tietz** » Fri Jan 25, 2013 4:30 am

I have a solution that works for HTML Help - it means: adding hundreds of lines of source code into each topic via the masterpage.
If I put in the js file reference and have the javascript in a separate file, it doesn't work - that's where I get the message.
And that's my concern.

In HTML 5 and WebHelp, not even having the source code in each topic helps - it hardly ever works. But that is as expected, really: Because the DOMs (Document Object Models) of full version browsers are different from what's happening in the file "hh.exe" which is used to display the HTML Help. It also uses a somewhat castrated version of the IE.
But I didn't do thorough research or adaptation of the code, because we don't use those formats.

Psider · Post by **Psider** » Mon Jan 28, 2013 7:26 pm

This might not be any help, but I created a javascript file, placed it in a Resources/Scripts folder, set the Master Page on the target and added this to the master page:
<script src="../Scripts/Myfoo.js" type="text/javascript"></script>

Building Webhelp didn't result in any outside link errors and produced the following code in the output:
<script src="Resources/Scripts/Myfoo.js">
</script>

The script only contained a Hello World document.write statement, and that printed in the topic fine.

I also didn't get heaps of script files all over the place, just the one in my Scripts folder.

The only time I got heaps of errors about Scripts/Myfoo.js was when the file didn't exist in the location - ie I renamed it to foo.js outside Flare using Windows Explorer. The error was "Missing linked source file: <path/Myfoo.jss>" and I think is listed once per topic in the output.

No answers, but maybe it'll spark ideas of what to check.

Amber

MadCap Software Forums

Referencing a Javascript File In a Master Page

Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page

Re: Referencing a Javascript File In a Master Page