It's been a while since I've touched web development, and I'm trying to get back into it. For some reason, however, I seem to be having trouble getting my JS scripts to run. I've tried linking a JS file using <script src="script.js"></script>, and even though the script file is in the same directory as my index.html, it seems to be ignoring it entirely. I've got some event listeners from jQuery, but at the very beginning of the code is a console.log("sanity check");.
So, after that didn't work, I tried writing the script directly in the html file like so:
<script>
console.log("WHAT IS GOING ON?!");
alert("It's finally working!");
</script>
and that STILL didn't work. Help!
Edit:
Here is the relevant HTML:
<head>
<script src="jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
<script>
console.log("WHAT THE CRAP IS GOING ONNNN");
alert("JS is running");
</script>
</head>
Here is the JS,
console.log("sanity check");
$(document).ready(function() {
console.log("Helloooo and good moonring!");
$("#back").hover(function() {
console.log ("*eyeroll* YES. I can hear you.");
$("#back").attr("cursor", "pointer");
}, function() {
$("#back").attr("cursor", "default");
});
});
None of it is working. I'm running it locally. The inspect tool in Chrome shows no errors whatsoever.
Edit 2:
I took a closer look at the code in the inspect tool. Still, nothing seeming to be wrong with it, but I have noticed that it isn't updating to the saved changes upon refreshing the page. This is clearly problematic, and very confusing. Also added type="text/javascript" and changed script.js to ./script.js (and the same with the jQuery file).
This snippet works, no?
<script>
console.log("WHAT THE CRAP IS GOING ONNNN");
alert("JS is running");
</script>
Make sure these are checked and messages aren't hidden. Also maybe change "console.log" to "alert" just to make sure but check to make sure messages aren't being filtered out.
Solved! Earlier, before I came across this issue, I decided to change my folder from "Web Design Project" to "WebDesignProject", because there were some things I wanted to look at in Terminal. Apparently my text editor, Atom, decided that this meant that the folder I had left open called "Web Design Project" was an entirely different folder. Those changes that I made were then mapped not to "WebDesignProject," but instead a new folder, once again named "Web Design Project."
In conclusion. Never put spaces in your project folder name. And, when you change the folder name, restart EVERYTHING. Atom should fix this phenomenon.
Related
Whenever I add the references in javascript it keeps saying that the references cannot be loaded. I have downloaded the packages and have them sitting in a file called Data/NGData/Dependencies/Packages.
I would have thought that the src would look like this
<script src="/Data/NGData/Dependencies/Packages/printThis.js"> </script>
But that doesn't work. Can anyone give me some pointers so that I can use the library.
EDIT: The error that I'm getting
I am trying to do something which I feel should be elementary and basic but it is not working. I have looked at many related Stackoverflow QAs but none covers this exact issue.
I want to run a function from an external js file called main.js. The file is loaded at the bottom of the body section of an html page in the usual way. All contents of the file is within the standard jQuery wrappers. I know it is loading properly because I can see it in Developer Tools and various animations coded in it are running correctly. I have jQuery 3.3.1 loaded in the head section of the page and again it must be loading properly because the animations are working.
As a test I have the following function in main.js:
function alerttest() {
alert('Function test works');
}
Then in the main body of the html page I call the function as follows:
<script>
alerttest();
</script>
So when I refresh the page I should get an alert but this does not happen. I get an error in the console:
Uncaught ReferenceError: alerttest is not defined.
This would happen if I loaded scripts in the wrong location so I also tried this to call the function so the DOM would be loaded first:
<script>
$(function() {
alerttest();
});
</script>
but I get the same Reference error. Can anyone suggest what is going on?
Environment: Windows 10, VSCode, Codeigniter 3, jQuery 3.3.1, WAMP with PHP 7.4.7
I believe I have solved the problem and, as I suspected, it was about the location of scripts. I have always been advised to include scripts at the bottom of the page just above the closing body tag but this didn't work in this instance. I have now located my main.js in the head section along with the jQuery CDN and everything works just fine.
Many thanks for responding.
I am trying to add bootstrap-select to my Flask app and I keep running into the error "TypeError: $(...).selectpicker is not a function". Everything I've read says this only occurs if you load jQuery again after loading bootstrap-select.js, so I went through and cleaned up my scripts, ensuring that jQuery was being loaded before all my other JS scripts, like so:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
However, I was still getting the same problem. I decided to take a look at the order of loading in the chrome developer tools window, and now I think my problem is this: jQuery is being queued for loading before bootstrap-select, but it's not actually starting the download until after bootstrap-select has already finished. I suspect this is because of the difference in size between the two.
Is there any way I can force my other scripts to delay loading until after jQuery has already loaded? Or if I figure out how to cache a copy of jQuery in my static directory, will that help?
Edit: Wow, okay, I got a lot of comments on this! To try and clarify as much as possible, I'm just going to make some notes:
After thoroughly checking all my scripts, I can confirm that only one copy of jQuery is being loaded.
This is not an https page, I'm running it locally on a Flask development server.
I checked the bootstrap-select url I have in my code and it is the correct one. Sorry, I'm not sure why it left out the dash when I was copy-pasting. I have corrected the question accordingly.
I have been using the Network tab in chrome's dev tools to check loading successes/times.
I moved my jQuery to the very beginning of the file to ensure it would load first, and I can now confirm it is finished loading before bootstrap-select loads.
Despite all this, I'm continuing to get the same error, so if anyone has other suggestions I would appreciate them. I'm completely out of ideas at this point.
You should put defer at the end of both script tags, so they are loaded in order no matter what, like this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>
Try changing the URL for your bootstrap select library to:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js
I have the solution and it's dumb as heck.
I was adding my scripts to the same place the previous developer added theirs, in the base template that all my other templates extend. The thing is, they added theirs to the end of the page, after the body tag was closed (presumably to make page loading faster). The little bit of jQuery which was using selectpicker was in the body, and was thus trying to load the function prematurely.
Thanks for all your answers!
i copied and pasted my hubspot js tracking code directly from the app as it says to do, but when i place in on the page in html it seems to be not clean code and might be closing out too soon, What is going on with this:
<script type="text/javascript">
(function(d,s,i,r) {
if (d.getElementById(i)){return;}
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
n.id=i;n.src='//js.hs-analytics.net/analytics/'+(Math.ceil(new Date()/r)*r)+'/12345.js';
e.parentNode.insertBefore(n, e);
})(document,"script","hs-analytics",300000);
</script>
It is causing any code after it to be broken and attached to this js call. I searched around an can't seem to find anything on this..
There's no error in the code, it's just that the IDE you are using is not being able to parse the code as valid syntax.
To confirm: Put your code in jsfiddle.net and click on "JSHint"
It will pop-up a message that code is valid.
The HubSpot tracking code uses some foo and messes up your following code. Specifically, here: '/12345.js'
I recommend adding it as a separate file: <script src="/assets/js/hubspot.js"></script>
I have a script embedded in a page, which is as follows:
<script type="text/javascript">
function fireNlPopup()
{
setOpacity(0);
centre();
document.getElementById("NlPopup").style.display = "block";
fadeInNlPopup();
}
//Other functions here
</script>
this makes the following appear as a popup in-window:
<div id='NlPopup' name='NlPopup' class='nl'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutNlPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Your next lecture is X, with Y, at Z.
</td></tr>
</table>
</div>
and finally, this is all called by a button:
<button type="button" style="button" onClick="fireNlPopup()">Next Lecture</button>
The problem is when I try and put the script is a different file. I have a file, called popup.js, with the exact same code (since it works when embedded in my php file, i assumed if i copied it rote into a js file and called that, it would work.
When i call the js file, I use:
<script type="text/javascript" src="popup.js">
</script>
and then all the content between the script tags go into popup.js. However, despite the code working fine when it's embedded, the second I take it out and put it in its own file, it doesn't work. I've double and triple checked, my code works fine, is syntaxed correctly, and that's why I left it out the code snippet. for some reason it just stops working. Am I calling the file incorrectly? It is on my server, I have checked that too =P
I'm probably being really stupid, but any help would be really useful. I've been stuck on this for ages.
Thanks =)
EDIT: for those who want a look, page is live here: http://oliverlea.com/3yp/tt.php
Also, using Chrome to view source, the file does load as a link.
Thanks for the help =)
EDIT 2:
First, yep the script tag is in the head of my file.
Second:
Ok, so regardless of whether I use src="popup.js" "/popup.js" or "./popup.js" I get nothing. The url always loads in Chrome's source viewer, and even by changing the permissions of the file to 0755, it still makes no difference.
I am completely flummoxed by this.
The script needs to be parsed before it can be referenced. This is a classic case of a race condition. Make sure the script is in the <head> if you're going to reference it in the DOM like that. Also make sure your pathing is correct in your src="/path/to/popup.js"
This is an encoding issue with the popup.js file. Please see below for my analysis. Some browsers "fix" this for you and others do not. The solution is to save popup.js file in standard encoding, on Windows machine try saving in Notepad.
EDIT: Added summary (above). Complete analysis of your problem is below:
Your page works in IE9, but not in Chrome or Firefox. Further, I copied the page and your CSS and JS (but not images) into a local project and it works for me there as well (even in chrome and Firefox).
I then loaded your live page into FireFox and opened FireBug, and when I clicked "Next Lecture", the console showed me that FireNlPopup is undefined.
On further review, I went to view source in FireFox on your live page, and clicked "popup.js"
The result looked like this:
It seems like you are using a text editor of some sort to create your popup.js file which is encoding in a weird format; use standard Notepad or Notepad++, (i.e., not Wordpad) or use Eclipse or Visual Studio to save the popup.js file, and you should be good.
Try using:
<script type="text/javascript" src="/popup.js"></script>
or if that doesn't work:
<script type="text/javascript" src="./popup.js"></script>
It is probably not finding the path, but using Firebug or Chrome's console should be able to tell you.
I had a different cause, but same symptoms. Essentially I didn't make the connect that a script file on a server, needs an addition to the routing table to retrieve it. A bit dumb in hindsight, but I may save someone else some time.
FWIW, I added (using node.js);
// script routes
app.get('/scripts/:script', script_server.serve);
and in script_server.js
exports.serve = function(req, res){
res.sendfile(req.param('script'));
};