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
Related
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.
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!
Hi I am trying to run some three.js examples locally on my machine. I know there are some problems with security so I need to set up a local server. So I'm running a local server with python. The background image and text displays but no animation is happening.
I checked console and getting the error THREE is not defined. I've downloaded three.js and put that folder in my project directory - any ideas on what's happening here?
The animation works in the browser when accessing from the three.js (examples) page. My script src is the same as the output of the command pwd when I am working on the command line in the three.js-master directory, as seen below:
<script src="/home/iiiiiii/Desktop/test/build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/loaders/PDBLoader.js"></script>
Hi most common reason for this is that either you are not adding three js into your project as I can see in your given code snippet
/home/iiiiiii/Desktop/test/build/three.js
but given path is not a valid path to give inside a project I will suggest moving this file to the project folder like other js files you added in the given snippet.
Or Simply you can add a CDN for Three js in your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>
Just put your <script src="three.js"></script> EXACT below the <body> tag that will help.
Does this library need to be called at the top of your document or after the page has been rendered?
I notice you dont have a type set when linking your libraries. try:
<script type="text/javascript" src="/home/iiiiiii/Desktop/test/build/three.js"></script>
I'm totally new at coding and i have some trouble using the dragNodes plugin. I can make the plugin work by itself with the generated random graph example, but I am struggling to make it work with my own graph.
I don't understand what to put in the html. I tried to put only that:
`<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>sigma.plugins.dragNodes(s, s.renderers[0]);`
and it doesn't make my nodes move. I think I have to change the content of "s" and "s.renderers[0]" but I cannot find where., and I don't know how to do it...
Basically, I would love if anyone could give me some explanations about how to plug a plugin in my page?
If you could help me, I'm lost and that would be awesome! Thank you a lot!
I think you are mixing up two things:
How to use script into html
How to include external js files in a web page.
In order to insert javascript directly into an html page you have to use the script tag as follow (called inline js):
<body>
<script>
// some inline js
var a = 1;
</script>
</body>
In order to include js from an external file you have to reference the file with the src attribute just like you did.
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
The only thing that you missed is that sigma.plugins.dragNodes(s, s.renderers[0]); is also some js code, you thus have to put it into script tags to that it can be interpreted as such by the browser.
Here is what you probably are trying to write:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
<script>
sigma.plugins.dragNodes(s, s.renderers[0]);
</script>
Having all this into <body>tags.
I should also mention that to render your graph using sigma you should have an instance of sigma in your page, and in your case it should be called s.
To learn more about js/web programming I would advise this: http://www.codecademy.com/
As far as documentation for sigma is concerned check out their tutorial: http://sigmajs.org/
In addition to Nicolas Joseph's answer (put javascript in script tag), you should also download the js library that is required and save the html file in the appropriate path.
For example if your file.html is in a directory dir (dir/file/.html)
Then the command:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
will search for a file named sigma.plugins.dragNodes.js in the following path:
dir/sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
To check out which librarires you are missing you should open debug mode in your browser (right click->inspect element) and check the console tab.
Cheers
I have this animation, see: js fiddle example
When I tried to convert it notepad++ .js and .html documents, I got:
uncaught reference error: Raphael is not defined.
What should I do to fix it? I gave the reference as:
<script type = "text/JavaScript" src ="Raphael 2.1.0.js"> </script>
You are not including raphael.js javascript file to your document correctly.
Add code below to your .html file, right before enclosing </body> element and any other javascript which are doing work with raphael.js library. (In other words, all javascript in js fiddle window goes below script include tag.)
<script type="text/javascript" src="path/to/raphael.js"></script>
// ... your raphael.js related javascript is located here ...
</body>
The reason why it works inside jsfiddle is that you can see from left upper corner of the page that Raphael 2.1.0 is selected, so jsfiddle includes it automatically to the page.
Hence, you should either download raphael.js file to your project folder or use extranal cdn url for the resource, such as http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js (but be aware, if location changes your code will stop working.)
Cheers.