My top level page implements a jQuery UI tab, each tab loading a separate HTML (or PHP) page.
Inside the child HTML/PHP pages, I want to load a .js file specific to those pages. The code in that .js doesn't get executed when tab loads. On the other hand, if I directly put the JS code inside the HTML page, it runs fine.
- <div id="tabs">
- <li><a href="firsttab/firsttab.html">first tab</a></li>
- <li><a href="secondtab/secondtab.html">second tab</a></li>
- <script src="firsttab.js"></script>
This does NOT work. Even if I put the <script> tag in <head> section, it doesn't work. Console just says "SyntaxError: syntaxerror"
- alert('running JS from .js file');
But, when I embed the script inside the HTML file itself, it works.
- alert('running JS from HTML file');
Why doesn't first approach work? I do want to keep the js code for firsttab.html in the same location as a separate file for cleanliness and ease of coding. What I might be doing wrong?