I am referencing two JS files in my map.HTML header. Chrome console gives
Uncaught SyntaxError: Unexpected token <
Here is why I'm confused. When I click on the Chrome Console error message, it takes me to the Sources tab. Under Sources, it puts me on the relative JS tab, and shows code starting with < !DOCTYPE html> then continues with a ton of code that is not in my map.html file or JS file. Presumably this is generated when the JS is read?
The two JS files are:
https://github.com/socib/Leaflet.TimeDimension/tree/master/dist
https://github.com/calvinmetcalf/leaflet-ajax/tree/gh-pages/dist
I am opening map.HTML locally with Chrome using a simple python server using a batch file (python.exe -m http.server).
I am sure this is very basic, but it's confusing me because I reference plenty of other JS files both online and locally and I don't get this error.
Thanks
If you try https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js in your browser, you will get an HTML page.
If you try https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js you will get what seams a source javascript file. But your browser may also consider it text/html, because that's what github sends in content-type header.
You can use third party sites which will serve files with appropriate content-type header, (example: https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js ).
In the future, try to do more research before posting here, otherwise a lot of people are going to downvote your questions, and even insult you.
A simple Google search for the differences between html and javascript may be a good start. The first step would be to remove those doctype lines. They mean nothing in Javascript. Just like the word granola has no meaning in Japanese. Different languages.
However, looking at your code, I don't see any DOCTYPE text in your javascript. In order to really debug this, you're going to want to open your webpage (html) in a browser (I recommend Chrome) and press F12 to open the developer tools. Go to the console and trace the error back through all of the files to find the origin.
In order to check and make sure that you're trying to pull javascript files and not html, take all the src urls you're using and paste them in a browser. If you land on a webpage, that url will serve up html, not javascript like you want. If you get a wall of text, you're probably referencing it correctly.
Correct: https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js
Incorrect: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
Hopefully this helps before this question gets deleted or put on hold. Also notice that people are going to downvote me for actually answering and trying to help.
You can't directly reference code stored in a github repo like you're trying to.
The URLs you're listing aren't javascript files; they're github webpages. That's why they contain HTML doctypes and code you don't recognize -- it's the github website code.
You can get the URL for the actual javascript files by clicking the "raw" button at the top of any of those pages (after selecting a specific individual file -- the urls you gave were for directories, not individual files.) For example:
This is an HTML file: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
This is the raw javascript:
https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
(That said, I don't believe it's a good idea to treat github like a CDN; usually you would use that purely as a repository and host the actual files in use elsewhere.)
Related
I have a weird network request in my page, which refers to JavaScript files, which I removed from every html file earlier. Cache is cleared and there is no single reference to be found in the source html and the JavaScript files. For fixing that and also out of general curiosity I would like to know if there is a simple way to find out where a request was triggered, preferably using the chrome-devtools.
Update:
Thanks to jaredwilli I found the initator column under the network-tab. However this only shows Other. What I would like to know, is the (html or javascript) file where those Requests have been triggered.
On the Network panel, you can determine what the initiator of a request was by viewing the Initiator column. It gives you the file, line number and type of resource it was, either Script or something else.
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I'm completely new to JavaScript and D3.js. I have done some work in recent days, like making appropriate json object for the graph, and wanted to know how to get this example running in particular. Any direction to appropriate links would be great, though I would prefer to get an answer in the form of any missing tags or any details I need to take care of.
Note: I have to run it locally, not on server-client model.
Update: I have done it a lot of times what Bill answered, it didn't work. So I tried again and I opened the console in browser to check for any errors. Got this:
Failed to load resource: file://d3js.org/d3.v3.min.js
net::ERR_FILE_NOT_FOUND
index.html:23 Uncaught ReferenceError: d3 is not defined
The point is that you cannot access files on your computer from javascript using file:// (think that people could access all your file...).
So you have to use <script src="address/d3.js"></script> here, address correspond to the address of your server (http://domain.com or http://localhost) or the relative path.
For example, you can download d3.js next to your html file (same folder) and just type <script src="d3.js"></script>
Hope this helps
You can do the following:
Go to https://gist.github.com/mbostock/4062045
Click on the Raw button next to index.html
Copy everything and paste it into a file on your computer called index.html
Go back and click on the Raw button next to the .json file
Copy everything and paste it into a file on your computer called miserables.json (make sure this file is in the same folder as index.html)
Double click on index.html, it should open in your browser
New to ASP and probably never named a Javascript file ".inc" :-)
But that seems to be the norm where I'm currently working.
I observed that right on the first page I started getting these javascript errors
Message: 'globalVariableXXX' is undefined
I found that the javascript file wasn't getting called at all.
Just changed the name to ".js" and it worked !!
The ASP file includes the JavaScript file like this :
<SCRIPT LANGUAGE="Javascript" SRC="include/MenuCode.inc"></SCRIPT>
But there are 100's of these ".inc" files and 100's of references to them, hence don't want to go with this solution.
I'd rather understand it..
Any idea why it would've worked in the first place and why it isn't now ?
I'm sure I'm missing something pretty basic in ASP..
Another point : This application is installed on another server and it works just fine there when I hit it. I'm trying to install it on this new box.
Where I made the change for it to work:
In IIS, Right click on the name of the machine and the Mime Types are right over there. Checked the old server and it had the settings for ".inc", copied them and it started working :) Thanks all.
Maybe someone changed the webserver to prevent it serving .inc files ?
In the management console (inetmgr) right click the website and choose Properties. Go to "home directory" tab and click Configuration.
You will probably see the .inc extension there (in the mapping tab) meaning those files are parsed by the ASP engine.
Remove the item from the mappings table, apply and you should be able to parse those files as raw data.
The proper way to use a script tag for javascript is with the type attribute, such as
<script type="text/javascript" src="include/MenuCode.inc"></script>
see: http://www.w3schools.com/tags/tag_script.asp
language isn't even listed as a supported attribute by the standard..
Edit: The reason .js worked and .inc didn't is .js is in the mime type definitions of the server as a JAVASCRIPT mime type by default. If not using an extension configured as text/javascript by default, you have to tell the browser what to treat the file as somehow. This is why the text attribute of script is a required attribute as per html 4.01.
I am trying to clean up some files on a website, one task being to collate all references to jquery to a singular file.
Yes, it's a large site with multiple developers and some standards have not been followed resulting in the current situation where there are various versions of jquery referenced.
What I have tried to do is create a 301 redirect for these files to point to a single version.
eg: <script type="text/javascript" src="/someurl/js/jquery-1.4.4.min.js"> should end up pointing to /someurl/js/jquery-core.min.js
I have tried to do this but it appears to fail to load the new file and jquery does not exist, my net panel shows that the original file has a 301 on it and I can see the reference to the new one, however the "response" tab is empty.
Is it possible to use a 301 redirect in this way?
Thanks for any suggestions / feedback
p.s I know there are better ways to reference jquery etc but large company process and red tape stand in my way from doing this any other way
When a browser loads the script from the src attribute, it should follow all redirection links, in the same method it retrieves html, images, stylesheets, etc. So the use case you've provided should work.
But since it's not working for you, you have got a couple options to resolve your problem.
Use fiddler or a similar debugging proxy to see what's going on between your browser and the server. Perhaps the 301 is malformed, or perhaps the mime-type is misconfigured, it could be any number of things. Troubleshoot it the same way you'd troubleshoot any other issue where the browser isn't following redirects.
Or... instead of using redirects, you can use mod_rewrite (or a similar server-side URL rewriting tool) to modify the request for a particular version of a script to your canonical version.