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!

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

Having trouble pulling javascript into separate file from htm

Status
Not open for further replies.
BobRodes

BobRodes

Instructor
May 28, 2003
4,215
US
I haven't a lot of experience with javascript, Jquery, and html yet. I have an htm page with query and javascript on it. It works the way I want it to, but when I try to pull the code into another file and reference it from there, I just get a blank page. I tried a few tests. I created a page called "Test.htm" which referenced "test.js" as a source. In test.'s I put
Code: 
alert("test");
alert("test2");
This worked fine. I then started pulling various pieces of my code into my test page to see what worked and what didn't. I find that putting my JQuery code on the page doesn't interfere, but putting all of my other references to javascript files does. If I put my reference at the top it works, but at the bottom it doesn't. It would seem there's some sort of precedence rules that I'm not aware of.

Can someone explain this to me, or point me to a place I can read up on it?

TIA

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Sort by date Sort by votes
Edit: I forgot to mention that when I put in all of my references, only the first alert executes and the second one doesn't. If someone can explain that to me I'll be delighted. :)

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
grr. When I put all my references in AHEAD of my test reference, that is what happens. If I put them behind, I get both alerts.

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
Without seeing your code, no one is going to be able to help you.

Post what is in your test.js file and show the html code that calls it.

mmerlinn


Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond
 
Upvote 0 Downvote
test.js:
Code: 
alert("test");
alert("test2");

This Test.htm works:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>

<script src="test.js"></script>
    <title></title>
</head>
<body>

</body>
</html>

If I change the head tag in Test.htm to this:
Code: 
<head>
	<script src="../js/functions.js"></script>
	<script src="../js/plugins.js"></script>
	<script src="../js/editor.js"></script>
	<script src="../js/calendar.js"></script>
	<script src="../js/flot.js"></script>
	<script src="../js/elfinder.js"></script>
        <script src="../js/wl_Alert.js"></script>
	<script src="../js/wl_Autocomplete.js"></script>
	<script src="../js/wl_Breadcrumb.js"></script>
	<script src="../js/wl_Calendar.js"></script>
	<script src="../js/wl_Chart.js"></script>
	<script src="../js/wl_Color.js"></script>
	<script src="../js/wl_Date.js"></script>
	<script src="../js/wl_Editor.js"></script>
	<script src="../js/wl_File.js"></script>
	<script src="../js/wl_Dialog.js"></script>
	<script src="../js/wl_Fileexplorer.js"></script>
	<script src="../js/wl_Form.js"></script>
	<script src="../js/wl_Gallery.js"></script>
	<script src="../js/wl_Multiselect.js"></script>
	<script src="../js/wl_Number.js"></script>
	<script src="../js/wl_Password.js"></script>
	<script src="../js/wl_Slider.js"></script>
	<script src="../js/wl_Store.js"></script>
	<script src="../js/wl_Time.js"></script>
	<script src="../js/wl_Valid.js"></script>
	<script src="../js/wl_Widget.js"></script>
	
	<!-- configuration to overwrite settings -->
	<script src="../js/config.js"></script>
		
	<script src="../js/script.js"></script>
	
	<script type="text/javascript" src="../js/stylesheetToggle.js"></script>
    	
        <script src="../js/datatables.js"></script>

        <script src="test.js"></script>
    <title></title>
</head>
This caused only the first alert to run. Out of curiosity, I just removed the link marked "configuration to overwrite settings", and got both alerts. Then I put it back in, and still got both alerts.

Did someone put mushrooms in my brownies, or is there any sort of reasonable explanation for this behavior? I'm using VS 2010 to edit my files. Maybe there's something strange going on there?

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
alert("[red]test[/red]");
alert("[red]test2[/red]");

I don't see anywhere that you are defining the contents of "[red]test[/red]" & "[red]test2[/red]".

mmerlinn


Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond
 
Upvote 0 Downvote
They are just literal strings. I get a popup screen saying "test", hit ok, and get another saying "test2". I just wanted to see if I could get any line of code to execute.

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
@mmerlinn
He doesn't have to, they are strings. he's outputting strings that's why they are in quotes. He doesn't need to define anything.

Back to the problem at hand though, with all those files is there something that may be causing errors?

Have you checked the error console in the browser you are viewing this on to see if anything is being reported?






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Yeah, I've checked them. I'm using firebug. I've actually gotten a little further now. I still don't know why it started working, but it started working. Maybe I did something stupid while cutting and pasting code.

My central question is this. What is the significance of the ORDER that you put your references in? Say I put the same function name in two different files and reference both of them. Does the lower reference overwrite the upper one, or is there a different behavior? Would all this also apply to CSS files?

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
Ok, guys, I feel stupid now. :blush: As it turns out, I was saving my files half the time as xyz.js.js without realizing it. I HATE MICROSOFT sometimes.

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
Thanks for your help. I'll post a css question I have to another thread.

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
I have just removed the dreaded "hide extensions for known file types" from my settings. :)

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
Duh. My bad. Did not notice they are literals.

mmerlinn


Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond
 
Upvote 0 Downvote
Glad you worked it out. Yes Windows tends to add the extensions onto the filename if the Show Extensions for known file types is not checked.

Specially annoying when trying to call Js libraries or PHP files or anything like that. Since you aren't calling the correct file name.

As far as precedence in file inclusions for Js, yes, the lower the file reference the more precedence it has.

That means that if the same function is called in two different references but the second (lower one), that's the function that's going to be called.

Basically because the function namespace is overwritten by the second function.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Thanks for the information, vacunita.

An unforeseen consequence of the information revolution has been the exponential propagation of human error.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
313
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
717
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
164
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
291
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
256
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top