Error when loading javascript libraries - javascript

I have a problem when loading the following javascript libraries.
The error that I'm getting is:
Failed to load resource (22:09:18:125 | error, network)
at http://localhost:8383/HTML5WebApp/js/libs/jquery-1.8.3/jquery.min.js
Failed to load resource (22:09:18:172 | error, network)
at http://localhost:8383/HTML5WebApp/js/libs/jqueryui-1.9.2/jquery-ui.min.js
I am developing a HTML5 App, my src for the libraries I want for my App inside head tags:
<title>HTML5 WebApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/libs/jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/jqueryui-1.9.2/jquery-ui.min.js"></script>
Using Netbeans IDE With Chrome Extension.

Ensure that the javascript files jquery.min.js and jquery-ui.min.js are in the correct path as specified in head tags :js/libs/jquery-1.8.3/jquery.min.js and js/libs/jqueryui-1.9.2/jquery-ui.min.js

To avoid this
Download JS Library on here
<script src="file_name.js"></script>//ex <script src="jquery-2.1.4.min.js"></script>
some times this may occur when you seems offline on your browser(No Internet Connection)

Related

Angular.js error

I'm working on a project where I'm trying to allow me to upload weather data from an .xls file to an SQL database. It's my first time using Angularjs so I used a tutorial and everything seemed to work fine.
My code is:
<head>
<title>.: Import Data with AngularJS :.</title>
<meta charset="utf-8" />
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\jquery-
1.10.2.min.js"></script>
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\angular.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-
route.min.js"
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\bootstrap.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
s">
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\ImportData.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.5/xlsx.full.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.5/jszip.js"></script>
Everything goes well but I get the following errors:
ImportData.html:7 GET http://localhost:9000/Content/bootstrap.min.css
net::ERR_ABORTED
ImportData.html:1 Not allowed to load local resource: ImportData.js
angular.js:88 Uncaught Error: [$injector:modulerr]
at angular.js:88
at angular.js:4957
at p (angular.js:410)
at g (angular.js:4917)
at gb (angular.js:4839)
at c (angular.js:1949)
at Uc (angular.js:1970)
at xe (angular.js:1855)
at angular.js:33826
at HTMLDocument.b (angular.js:3468)
I've read that bootstrap and angular can conflict, but take it out and it still seems to error out. Any ideas where the error is? Thanks in advance.
Your files are not able to fetch by the browser from the mentioned locations. So better way to give relative paths i.e. "../../ImportData.js".
Also It shows injector module error that means, Angular file is missing and its module is not able to find the libraries.
You can try replacing all the file paths with as well. Also this http://localhost:9000/Content/bootstrap.min.css
net::ERR_ABORTED
is due to the internet failure or due to your firewall restrictions. So, you can replace this with "https" instead of 'http'.
Try these options. There's problem with file links only.
The problem is that you are trying to load resources from your local computer. Try giving path as relative that will solve your issue. Also use base url in html if you want to control base url for all requests from your app.

can not able to load dojo.js

As I am trying my hands on dojotoolkit, I try to run (open) following html code in my browser, as they said on tutorial, but my browser does not able to load dojo.js
At time of troubleshooting I found that source URL is converted like following:
file://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
Use a real webserver, rather than browsing from the filesystem.
While Frank is correct in that adding an explicit protocol to the URL will fix this particular issue, you are inevitably going to run into other issues anyway, such as XHR being locked down from the file:// protocol. The protocol-relative URL you were originally using will work fine if you test on a real webserver which serves http or https.
you need to add http as the protocol for the dojo.js file source.
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
Also best practice is to add library files in the head tag instead of the body tag.
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</head>

Unexpected Illegal Token in javascript from CDN - scripts contains only garbled text

I'm trying to host a webpage on my PC (Running Windows 7), and intend to use bootstrap css/javascript library, but I am having trouble using the bootstrap javascript library from a CDN. Here is a minimal example, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Hello world
</div>
</body>
</html>
I have tried to host the page on localhost using both "python -m SimpleHTTPServer" and using node.js + express, but I get the same result, where I get the message "Uncaught SyntaxError: Unexpected token ILLEGAL" with reference to bootstrap.min.js:1 in chrome's javascript/html debugger.
If I open bootstrap.min.js it only shows lots of chinese signs (which is translated to meaningless text in google translate). All this goes for other CDN scripts also, such as socket.io.
*Edit 1:
I tried downloading the source and loading the bootstrap.min.js script locally
with
<script src="/js/bootstrap.min.js"></script>
but I get the excact same problem as before.
I had the same problem on my own local page. I thought it might be an issue with the way I was loading bootstrap or jquery as these files were showing what looked like Chinese characters in Chrome Dev tools, even though the js and css files looked ok when loaded from a URL. Googling "Unexpected token ILLEGAL" came up with this question on Stack Overflow, so I'll answer. The issue turned out to be invalid characters in my HTML.
My method to solve was to create a dead simple page from scratch and add the features from the failing page one by one until it resembled my failing page. In the end, the source looked identical in a text editor, but the newly constructed page worked fine while and the original page had the "unexpected token" error in Chrome console. So I compared the files and found some hidden characters (which I had copy and pasted from a web page snippet) which were causing the failure.
When I copy and paste your HTML above into a text file and open it in Chrome, it displays correctly.
In my case the character coding made the same issue.
As soon as I forced the output to save as UTF-8, the issue gone.

I'm trying to include JQuery in Dreamweaver, but it's not being recognized. Not as file, not from a CDN

I've tried including it in my files, and from a CDN. I followed a tutorial about it, although it's hardly a tutorial to follow since all i had to do was include the link after <head>. Still, it's not being recognized and plugins aren't being recognized and just appear as text. Does anyone have an idea what could be the problem? If it's perhaps a setting in dreamweaver that has to be changed?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="myfirststylesheet.css" rel="stylesheet" type="text/css">
<title>Hallo wereld</title>
</head>
</html>
Its worth noting that, http or https in src hinders the inclusion of the cdn files at times.Remove the protocol and try this way....this way, it would take either http or https depending on the nature of hosting server
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
EDIT
Further Read on why this helps ( if not running the file from computer but through some server, even localhost):
Can I change all my http:// links to just //?
http-and-https-with-google-cdn

Not allowed to load local resource using enyo

I'm using phonegap to build an enyo app. My program works completely fine in chrome and it also works in the ripple emulator service for blackberry. My problem is, when I use the .ipk build for webOS and the .apk build for android, I get the same error:
Not allowed to load local resource: file:///usr/palm/enyo.js
Uncaught ReferenceError: enyo is not defined, package.js:1
Uncaught ReferenceError: enyo is not defined, tests/package.js:1
Uncaught ReferenceError: enyo is not defined, index.html:10
This leads me to think that it must be a problem in my index file, which is:
<!DOCTYPE html>
<html>
<head>
<title>Enyo Bootplate App</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- look this up for blackberry ad error -->
<!-- css -->
<link href="build/enyo.css" rel="stylesheet">
<link href="build/app.css" rel="stylesheet">
<!-- js -->
<script src="enyo/enyo.js"></script>
<script src="phonegap.js"></script>
<script src="source/mobile.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.blackberry.com/app_includes/asdk/adBanner.js"></script>
<script src="source/gameBanks.js" type="text/javascript"></script>
<script src='https://cdn.firebase.com/v0/firebase-auth-client.js' type='text/javascript'></script>
<script src="https://static.firebase.com/v0/firebase.js" ></script>
<script src="build/enyo.js" ></script>
<script src="build/app.js" onerror="alert('No application build found, redirecting to debug.html.'), location='debug.html';"></script>
</head>
<body class="enyo-unselectable">
<script>
new App().write();
</script>
</body>
</html>
The weird thing is that index.html:10 is a comment (the css comment) so I have no idea how an error could possibly be there. Anyone have any idea why I would be getting this error? Or perhaps what "file:///usr/palm/enyo.js" is? That's not a file in my package.
Also, after messing around with it a bit, adding lines at the top of index.html doesn't change where the error is (index.html:10) so is it possible that the error is referring to some other form of index.html? I went through my commits at github and at no point in time was there anything other than comments at line index.html:10.
Update:
When using any other service to package the apps such as palm-run, it updates my code properly. My builds downloaded off of phonegap are not working properly. Is there any reason why phonegap's build specifically would cause this problem?
Finally solved this problem, phonegap was somehow finding the wrong index.html files. When I downloaded the enyo bootplate, there were some index.html's deep within the api and tools folders. After I removed those, it worked properly.
Strange...not sure what is causing that, but I do see you are trying to load enyo.js twice. I doubt that that is the issue, but it is something you want to clear up.
If you start with the base bootplate project with no changes, does it work to package an ipk/apk?

Categories