Javascript, .js files, and options for referencing them

[AHunter3]

I have some sample javascript that I’ve downloaded which I am trying to modify to suit my purposes. The problem is that the heavy lifting, codewise, is being done by an external file, a “.js” file, and in the environment where I am trying to implement this I don’t have the same luxury of referencing an external file as being at “…/somefolder/jsfile.js” (the type of environment I code in is a multi-user environment on which certain types of code are executed from the end user’s perspective; the end user doesn’t have filesystem access to / or …/ or /path/to/current/file or anything else on the server on which this will run).

I have tried replacing the reference to “…/somefolder/jsfile.js” with an http reference after uploading the jsfile to a web-accessible location, but that doesn’t work (either in my environment or in a modified copy of the same html file).

I have tried copying the contents of the jsfile and inserting the text of it into a text container that I can reference in mid-code, but that doesn’t work.

I have tried simply copying the jsfile contents and pasting it directly into the local file / local code, replacing src="…/somefolder/jsfile.js" with the actual code that’s in the jsfile — and I really expected that to work — but it doesn’t.

(In other words, where it WAS this:

<script type=“text/javascript” src="…/somefolder/jsfile.js"></script>

I replaced with this:

<script type=“text/javascript” ENTIRE CONTENTS OF JSFILE PASTED HERE </script>
)
Got any tips?

[friedo]

First, what exactly “doesn’t work” when you use an absolute path to the .js file to include it? E.g.

<script type="text/javascript" src="http://example.com/jsfile.js"></script>

(Note that tags must always be closed properly; you can’t have a solitary or self-closing tag.)

If you need to include the Javascript inline, place the contents in the element, with no src attribute:

<script type="text/javascript">
JS code here
</script>

You may want to additionally use a CDATA block to encapsulate the script to avoid parsing ambiguities (one reason why it’s always better to put large chunks of JS in external files if you can.)

[AHunter3]

@friedo

First, what exactly “doesn’t work” when you use an absolute path to the .js file to include it? E.g.

<script type="text/javascript" src="http://example.com/jsfile.js"></script>

Whether I try it in a duplicate of the original .html file or in my own environment, it opens to “Loading graph…”, a phrase that sits between

tags below the tag that contains the reference to the jsfile but above the next tag which feeds specific info… data that is to be charted and labels for it and so forth.

It just sits there forever, “Loading graph…”. In the original which references the jsfile at a specific LOCAL location, it loads the graph so quickly you never see the “Loading graph…” text string.

If you need to include the Javascript inline, place the contents in the element, with no src attribute:

<script type="text/javascript">
JS code here
</script>

Yep, that’s what I did. Didn’t work… and by “didnt’ work” I mean that that, too, opened to “Loading graph…” and just stayed there.

You may want to additionally use a CDATA block to encapsulate the script to avoid parsing ambiguities (one reason why it’s always better to put large chunks of JS in external files if you can.)

What’s a “CDATA block”? Me Javascript newbie.

[friedo]

You’re going to need to provide more details to get to the bottom of it, but as a guess, I’d say this Javascript is trying to load data from some other site and is therefore running afoul of the same-origin policy.

Here is how to use a CDATA block for inline Javascript code, but that won’t help in your situation.

[njtt]

@AHunter3

Whether I try it in a duplicate of the original .html file or in my own environment, it opens to “Loading graph…”, a phrase that sits between <div> tags below the <script> tag that contains the reference to the jsfile but above the next <script> tag which feeds specific info… data that is to be charted and labels for it and so forth.

The usual practice (though I do not think it is mandatory) is to load your JavaScript file in the HEAD of your HTML document, and then call it from within the BODY of the page at the appropriate point. It sounds, from this, as you are trying to load it in the BODY.

@AHunter3

Yep, that’s what I did. Didn’t work… and by “didnt’ work” I mean that that, too, opened to “Loading graph…” and just stayed there.

That sounds to me more like an error in the JavaScript code itself, unless you messed up your <SCRIPT> tags by misplacing or forgetting a bracket, or a quote mark or something, somewhere. As friedo said, it is very hard to tell without seeing your actual code.

[ZipperJJ]

Are you getting any Javascript errors? If you’re using Firefox, go to Tools -> Error Console and look at everything under the ERRORS button. I find it best to open it up, clear it (by clicking the CLEAR button) and then reload your page, to see errors just from the page you’re on.

Usually one can step through the errors and see exactly what the problem is.

Also, since the JS is supposed to be returning a graph, is it referencing any image or Flash files in it? Since you’re moving things around, you may be disrupting the file references therein.

[AHunter3]

No reason for me to be coy, it’s open and free, and not mine (I’m just trying to redeploy the code):

http://www.jscharts.com/

The specific one I’m playing with is:

JS-Charts_demo/examples/pie-charts/example-1/index.html

And the jsfile it references is:

JS-Charts_demo/sources/jscharts.js

It sounds, from this, as you are trying to load it in the BODY.

Nope… After first opening jscharts.js in my text editor and copying to clipgoard, I opened index.html in the same text editor; where it has this:

<head>

<title>JSChart</title>

<script type=“text/javascript” src=“…/…/…/sources/jscharts.js”></script>

</head>

… I selected everything starting with src and ending with the final trailing “>” bracket just before the </script> end tag there, and replaced it with the pasted contents of the jsfile “jscharts.js”. I did insert a hard return before pasting and another after, for easier readablity… that shouldn’t have any effect, correct?

jscharts.js is way too long to paste in here.
jscharts is referenced by the OTHER index files in the OTHER example folders (other colors schemes of pie charts, and line charts and bar charts etc etc), so it seems unlikely that jscharts would, ITSELF, contain paths back to yet another file; it is the only file in the sources folder, by the way.

[ZipperJJ]

You don’t want to paste the contents of JSCharts.js into the src param of your JS reference.

friedo showed you how to do it in his first post.

What you really need to do is this…which is outlined here.

1. Put a copy of the file jscharts.js in the root of your application. The same level as your index.html or whatever page you’re trying to reference it from.
2. In whatever page you’re trying to reference it from, put this in the head:

<script type=“text/javascript” src=“jscharts.js”></script>

If the user has access to your html page, his browser has access to jscharts.js on the same level.

If you need to edit jscharts.js, edit it. There’s no reason to put all of the code for it on your html page.

If you do want to put javascript code on your html page, do NOT use the src parameter. As friedo says, you do it this way:

<script language=“javascript” type=“text/javascript”>
// all of your code here
function SomeFunction()
{
document.write(“Here is my function”);
}
</script>

[AHunter3]

@ZipperJJ

]You don’t want to paste the contents of JSCharts.js into the src param of your JS reference.

I didn’t; I erased the “src =” along with the path to the jsfile and simply pasted the entire CONTENTS of the jsfile there between the two script tags.

do it this way:

<script language=“javascript” type=“text/javascript”>
// all of your code here
function SomeFunction()
{
document.write(“Here is my function”);
}
</script>

Yeah, that’s what I did. Or rather I did <script language=“javascript” type=“text/javascript”>
// all of the code from the jsfile here
</script>
</head>
<body>
<script language=“javascript” type=“text/javascript”>
//all the java that CALLS the jsfile’s functions here
</script>

[/quote]

@ZipperJJ

1. Put a copy of the file jscharts.js in the root of your application.

There’s no such place. If this is going to work for me, ALL of the javascript code has to exist in one chunk as if on a single web page, OR it has to be accessible at a remote location such as http://domain.com/whatever/jscharts.js

Again, I should avoid being coy: I’m a FileMaker developer and the intended purpose is to put JavaScript into a data URL which in turn is embedded as the definition of an layout object known as a “web viewer”.

(So there is, ultimately, no HTML file at all, the code is in a piece of a database file)

A web viewer functions as a built-in web browser inside the confined of a FileMaker database. A web viewer could be defined as “http://www.google.com” in which case when you go to that layout you are staring at the standard Google home page. Or it could be defined as

“http://www.mapquest.com/maps/map.adp?country=US&addtohistory=&address=”&
Parsed Address&
“&city=”&
Parsed City&
“&state=”&
State&
“&zipcode=”&
GetAsNumber(ZIP)&
“&homesubmit=Get+Map”

In which case when you go to that layout you are staring at a map of the location defined by the contents of your current record’s value for Address, City, State, and ZIP.
More to the point, the definition of the web viewer can include javascript, ranging from buttons that highlight upon mouse-over to complex processes that draw charts based on values in various database fields.

But in each and every case there IS NO “…/…/someFolder/someFile.js”, there is absolutely no way to resolve a filepath to some other file, so unless an external jsfile can be referenced at http://domain.com/jsfile.js, there CANNOT BE an external file of that nature, it all has to be in one clever package.

Now, what I can do is offload large chunks of the code into a Filemaker text field, and intersperse the boilerplate text that defines the web viewer with the FileMaker text field, so that as a whole FileMaker examines that formula and comes up with a unified string and says 'Here, THIS is your web viewer definition". (As was done with the MapQuest web viewer described above). But offloading the jsfile’s raw text in that fashion does not appear to work. It doesn’t want it “as text”.

[ZipperJJ]

All right then…have you tried making a web page with all of the HTML and js you need and running it in Firefox to see what the JS errors are (as I described above)? Have you confirmed that it works totally fine outside of the FileMaker web viewer thingy? You have to start there. First get it working on its own then dump it in to a field.

[AHunter3]

Yeah that’s what I figured.

I’ve got it working where the jsfile is being referenced as an external file (that’s how the demo downloads, already set up that way). When I try to move the code from the jsfile directly into the index.html file I can’t get it to work (and that’s in a regular web browser).

[ZipperJJ]

So there’s no JS errors, huh?

[AHunter3]

No… it acts as if it’s just taking a long long time to process the javascript, with a bit that’s between <Div> </Div> tags that says “Loading graph…”.

It never finishes “loading graph…”.

No JS errors, AFAICT

[ZipperJJ]

You do have an XML file, right?

[AHunter3]

No… why would I have an XML file?

It did not come with one, and works without one (in the configuration whereby there is an external .js file)