Some JavaScript not working in one of two identical HTML files

Question

I have two identical HTML files (below) containing JavaScript to load HTML from separate files into divs. HTML file A works fine. HTML file B, however, does not work. I get the following errors while inspecting file B:

jquery-1.10.2.js:1 Uncaught SyntaxError: Invalid or unexpected token
working2.html:13 Uncaught ReferenceError: $ is not defined
    at working2.html:13
(anonymous) @ working2.html:13
working2.html:18 Uncaught ReferenceError: $ is not defined
    at working2.html:18
(anonymous) @ working2.html:1

The issue is experienced in Firefox and Chrome while the website is running on IIS. I'm hoping it's just something simple that I'm missing, as I'm new to JavaScript. Any help is appreciated!

File A (working):

<head>
    <title>Switch Maps</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!-- Sorting Javascript script from: https://www.kryogenix.org/code/browser/sorttable/ -->
    <script src="./Scripts/sorttable.js"></script>
    <!--JS from https://stackoverflow.com/a/42333464 -->
    <script src="./Scripts/jquery-1.10.2.js"></script>
</head>

<body id="Switch_Maps">
  <!--Nav bar (code modified from https://stackoverflow.com/a/42333464)-->
  <div id="nav-placeholder"></div>
  <script>$(function(){$("#nav-placeholder").load("./page_elements/side-bar.html");});</script>
  <!--end of Navigation bar-->

  <!--Footer (code modified from https://stackoverflow.com/a/42333464)-->
  <div id="foot-placeholder"></div>
  <script>$(function(){$("#foot-placeholder").load("./page_elements/foot.html");});</script>
  <!--end of Footer-->
</body>

File B (not working):

<head>
  <title>Switch Maps</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <!-- Sorting Javascript script from: https://www.kryogenix.org/code/browser/sorttable/ -->
  <script src="./Scripts/sorttable.js"></script>
  <!--JS from https://stackoverflow.com/a/42333464 -->
  <script src="./Scripts/jquery-1.10.2.js"></script>
</head>

<body id="Switch_Maps">
<!--Nav bar (code modified from https://stackoverflow.com/a/42333464)-->
<div id="nav-placeholder"></div>
<script>$(function(){$("#nav-placeholder").load("./page_elements/side-bar.html");});</script>
<!--end of Navigation bar-->

<!--Footer (code modified from https://stackoverflow.com/a/42333464)-->
<div id="foot-placeholder"></div>
<script>$(function(){$("#foot-placeholder").load("./page_elements/foot.html");});</script>
<!--end of Footer-->
</body>

Thanks in advance for any help possible!

Edit: The answers here: JQuery - $ is not defined do not resolve the issue for me.

Possible duplicate of [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — djacobsdev, Jun 27 '18 at 14:05
Are they in the same folder? Because it's trying to load jQuery from subfolder. — FINDarkside, Jun 27 '18 at 14:06
Did you compare the files? Ensure that they are exactly the same? Did you try changing file names? Because if you can change the name of file a to file b and it still works, they obviously are not the same files. — FINDarkside, Jun 27 '18 at 14:11
@FINDarkside If I switch the names, eg. A->B and B->A, B works and A does not work. — gitClaus, Jun 27 '18 at 14:53
Yeah well the files aren't identical then, how did you compare them? Use some online binary diff tool. — FINDarkside, Jun 27 '18 at 14:56
Aww, the two files visually appear the same, but they are different when comparing them using a diff tool. Appears to be some kind of funky ASCII encoding, or something. Thanks! — gitClaus, Jun 27 '18 at 15:11
@FINDarkside if you post that as an answer, I'll accept it. File B was being being generated by a Powershell script and the encoding was incorrect. — gitClaus, Jun 27 '18 at 15:18

score 0 · Accepted Answer · answered Jun 27 '18 at 15:37

0

If you can switch the filenames and the original file A still works, the only possible reason is that your files aren't identical after all. You should use a binary diffing tool to confirm that.

answered Jun 27 '18 at 15:37

FINDarkside

2,102
1
18
26

Some JavaScript not working in one of two identical HTML files

1 Answers1