Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scope issues between included .js files? 2

Status
Not open for further replies.

BigTeeJay

Technical User
Jun 13, 2001
106
US
Greetings,
Here is my problem, I have a html file, that for simplicity
sake has one form button, and it calls tstCallerFunc() in
its onclick event.

At the top of this html file I have included two javascript
(.js) files. The first is specific to this html page, the
second does generic validation based on a given string...

[tt]
<head>
<script src=&quot;check_controls.js&quot; type=&quot;text/javascript&quot;></script>
<script src=&quot;validate_controls.js&quot; type=&quot;text/javascript&quot;&quot;></script>
</head>
[/tt]

...so the onclick calls tstCallerFunc which is located in
the check_controls.js file.

In check_controls.js I have...

[tt]
function tstCallerFunc() {
var msg1 = tstCallerInFile(); //works fine
var msg2 = tstCallerOutFile(); //fails here

alert(msg1);
alert(msg2);
}

function tstCallerInFile() {
return &quot;Returned from within file&quot;;
}
[/tt]

...then in validate_controls.js I have...
[tt]
function tstCallerOutFile() {
return &quot;Returned from external file&quot;;
}
[/tt]


So what happens is that when I call the function that is
within the same .js included file, it works fine. When
I try to call the other function (that is in the second
.js file) it fails and says &quot;Object expected&quot;.

Is it not possible to call a function that is located in
a second included script file?

Any ideas on how I could make this work? (short of
consolidating the two files?)

Regards,
Tj
 
arg, if only i could delete this ;) (its a path type problem, above where I put...

[tt]
<script src=&quot;validate_controls.js&quot; type=&quot;text/javascript&quot;&quot;></script>
</head>
[/tt]

...I have an extra &quot;, and to think, all the time I have been
spending trying to figure this damn thing out.

Tj
 
Nevermind, still getting the same error message (I could
only be so lucky that that was the problem ;) (error
messge = &quot;Object expected&quot;)
 
Something else I found that is interesting... If you look on this site...


...the author is talking about includes as well, and has
a link that you can use to check to see if your browser
has any problems with it.

If I try it, I get the same error... which is odd, since
I could do it when the functions are all within a single
.js file?
 
Tj, I have not looked at the links you posted but this works in IE5 on NT4

<<first.htm>>
<script language=&quot;JavaScript&quot; src=&quot;foo1.js&quot;></script>
<script language=&quot;JavaScript&quot; src=&quot;foo2.js&quot;></script>

...
<div onclick=&quot;foo()&quot;>Go</div>

<<foo1.js>>
function foo(){
foobar();
}

<<foo2.js>>
function foobar(){
alert(&quot;this is foobar&quot;);
}

Good luck
-pete
 
The problem could be syntax problems in one or both of the included js files that prevent
Code:
tstCallerOutFile()
from showing up at runtime. Some things to try --

Reverse the order of the
Code:
<script>
include statements. See if the problem changes with read sequence.


Code:
Alert()
on both sides of
Code:
tstCallerOutFile()
. Make sure the function actually loads. Spelling and syntax problems will make the browser give up loading an included file. The right problem in a completely unrelated function could the culprit here.
 
Well... thank you both (Palbano & Wray). I setup some files
as mentioned... and got some interesting results. I think
the results help answer my original question, but they
illustrate what my actual problem was with my original code.

Here is the &quot;code&quot;...

<<test.html>>[tt]
<html>
<head>
<script src=&quot;foo1.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;></script>
<script src=&quot;foo2.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;></script>
</head>

<body>

<div onclick=&quot;foo();&quot;>Go</div>

</body>
</html>[/tt]

<<foo.js>>[tt]
function foo(){
alert(&quot;In foo, before bar&quot;); //works fine

var msg = bar(); //msg = undef

var foo_msg = &quot;Bar returned: &quot; + msg;
alert(foo_msg); //&quot;Bar returned: undefined&quot;


alert(&quot;In foo, after bar&quot;);
}[/tt]

<<bar.js>>[tt]
function bar(){
var bar_msg = &quot;In bar&quot;;
alert(bar_msg); //works fine


return bar_msg; //is this wrong?

}[/tt]

...so all the alerts are displaying, and it seems like I
might be using the return incorrectly. I thought you could
return values (other than T/F & digits) with functions?

This illustrates my original problem. In my original
code that I was using, I was trying to return a value that
the code depended on (not just assigning the returned val to
a string var), and since it was returning [tt]undefined[/tt]
the script was choking.

Any ideas?

Tj
 
Arg... correction, change the &quot;test.html&quot; to read as...

<<test.html>>
<html>[tt]
<head>
<script src=&quot;foo.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;></script>
<script src=&quot;bar.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;></script>
</head>

<body>

<div onclick=&quot;foo();&quot;>Go</div>

</body>
</html>[/tt]
 
OK... now I am about to lose my mind, it all works now (it wasnt just a second ago even after correctly my post on &quot;test.html&quot;.

So, on Win2K Pro, with IE 5.50 (update SP2, Q321232,
Q323759), the following works...

<<test.html>>[tt]
<html>
<head>
<script src=&quot;foo.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;></script>
<script src=&quot;bar.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;></script>
</head>

<body>

<div onclick=&quot;foo();&quot;>Go</div>

</body>
</html>[/tt]

<<foo.js>>[tt]
function foo() {
alert(&quot;Starting foo&quot;);

var msg = bar();
var foo_msg = &quot;Bar returned: &quot; + msg;
alert(foo_msg);

msg = inFoo();
var foo_msg = &quot;inFoo returned: &quot; + msg;
alert(foo_msg);

alert(&quot;Back in foo&quot;);
}

function inFoo() {
var inFoo_msg = &quot;In inFoo function&quot;;
alert(inFoo_msg);

return inFoo_msg;
}[/tt]

<<bar.js>>[tt]
function bar() {
var bar_msg = &quot;In bar function&quot;;
alert(bar_msg);

return bar_msg;
}[/tt]

I am at a complete loss as to why it suddenly started
working.

But I do want to thank you both, good ideas about alerting within the function to see how far it was getting (just
needed to simplify it to troubleshoot... I should've thought
of that... ah, probably too frustrated).

A star for both of ya :)

Regards,
Tj
 
Thanks for the star.

My guess is the errors you were getting are related to page load timing. Timing can get complicated when the script starts bringing in external components, especially when a component contains immediately executed JavaScript.

For best results try to make sure the page loading has time to do all of its work before handing it application tasks. A simple <body> onload() routine gives a relatively safe and stable platform for kicking off the application.

Also, I'd be very careful with the 'DEFER' option you've introduced to the <script></script> links. (Never used it, had to look it up. Goodman says the syntax is simply 'DEFER' ...) This is begging for a situation where the page requests a function not yet loaded.
 
You might be onto something there, my original intention
was that I would have several (pretty large) scripts that
didnt do anything to the actual rendering of the page.

So I was hoping that I would be able to defer loading of
them until after the page was loaded, but it looks like
the timing may be an issue (it can render the page much
quicker than load some of these large scripts... which is
presenting the UI before the scripts are ready to handle
it).

Guess I should rethink the defer... :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top