Not allowed to load local resource using enyo - javascript

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?

Related

JQuery - works locally but $ is not defined but only on deployed site

Built a site in MVC, including jQuery in the layout file like this:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/jquery")
#Styles.Render("~/Content/css")
</head>
<body>
<!-- content -->
</body>
</html>
JQuery is referenced via nuget and bundled like this:
public class BundleConfig
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/stickyfill.js"));
}
And that works fine running the site locally in Visual Studio.
When I deploy to IIS and try to run the site I get the dreaded Uncaught ReferenceError: jQuery is not defined error.
The first thing I checked was that the jQuery package was available via the address the deployed page was trying to use:
/bundles/jquery?v=[a token]
Which it is. You can even see it referenced in the bundles from Chrome Developer tools. It may be worth noting that the css, which is deployed via the same mechanism with a token, works fine.
I've also worked my way down the answers to the question JQuery - $ is not defined and either eliminted or tried them, to no avail.
The only thing I can think of is that it's not loading before the initial call to jQuery(document).ready() - which is why I moved the bundle into the <head> tag. But that doesn't help, and I don't know what else I can do to slow or wait for page load.
What on earth else could this be?
EDIT: Somone asked for the head of the rendered page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[the title]</title>
<script src="/bundles/jquery?v=[a token]"></script>
<link href="/Content/css?v=[a token]" rel="stylesheet"/>
</head>
try this :
public class BundleConfig
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.min.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/stickyfill.js"));
}

Emulate getting Jira JSON data via web link in browser with JavaScript

I'm not exactly sure how to ask this question. I don't have easy access to my company site to try this using normal AJAX calls, so I'd need to resolve cross domain issues as well as possibly change settings on our Jira server. Since I'm home all week this week ostensibly on vacation, but a bit bored before Thanksgiving, I thought I'd play around with this so I can get a jump on the project I just got assigned this past Friday.
Using the Jira Rest API, if I drop https://jira.atlassian.com/rest/api/2/projectinto a browser (Chrome) and press enter, I get valid JSON data back in the browser. Granted you have to have valid Jira credentials as well as be already logged onto the site for this to work (otherwise you just get [] for a response), but for the experimentation I'm doing that's OK. I'm just trying to generate some valid data that I can massage into a form.
How can I do this in JavaScript in an automated fashion so the returned JSON goes into a variable that I can use for subsequent data manipulation? Ideally this should work on our real Jira site, but I'm fine if it just works on the sites linked in this question, as I said I'm just doing some experimentation trying to read project data and associated properties.
I've tried (cite):
$.getJSON("https://jira.atlassian.com/rest/api/2/project?callback=?", function(result){
//response data are now in the result variable
alert(result);
});
I've also tried to simply eval() the string into a variable, but that doesn't work either.
My eventual project will most likely be in jQuery / jQuery Mobile, but a straight JS answer is fine, I can translate that into jQuery later if it becomes necessary.
EDIT:
Here is the HTML I'm using to test this and suggestions being made, pretty much straight out of https://html5boilerplate.com/:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
var result = $.get("https://jira.atlassian.com/rest/api/2/project");
console.log(result);
</script>
</body>
So using AJAX / .get, etc was the wrong approach (at least for this experiment, it's the right answer for when I have access to the JIRA server).
What I found that worked was using:
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
console.log(data);
This is not a perfect answer because it replaces the body of the web page with the JSON response from JIRA, but it allowed me to move forward. I found several different methods to try in this SO post.
Here's the whole web page:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Get JIRA data</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = document.getElementsByTagName('body')[0].innerText;
console.log(data);
</script>
</body>
</html>
The reason it doesn't work as well as it might is you still have to go after the fact & get the data in the console:
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
But that gives you an array of JIRA objects that you can then manipulate.
Adding this SO question to the answer because it contains useful information about solving CORS (Cross Origin Resource Sharing).

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>

Error when loading javascript libraries

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)

Respond.js not working cross domain

I'm having difficulty getting Respond's CDN/X-Domain Setup working.
I started off serving all assets from the CDN:
<link rel="stylesheet" href="http://cdn.example.com/css/main.css?2013012401">
<script src="http://cdn.example.com/js/modernizr-2.6.2.min.js?2013012401"></script>
<script src="http://cdn.example.com/js/respond.min.js?2013012401"></script>
In theory this should work, since all assets are being served from the same domain. However IE8 didn't receive Media Query support like it should. So I investigated Respond's CDN/X-Domain Setup and amended my <head> section to this:
<link rel="stylesheet" href="http://cdn.example.com/css/main.css?2013012401">
<script src="http://cdn.example.com/js/modernizr-2.6.2.min.js?2013012401"></script>
<script src="http://cdn.example.com/js/respond.min.js?2013012401"></script>
<link href="http://cdn.example.com/respond-proxy.html?2013012401" id="respond-proxy" rel="respond-proxy">
<link href="http://cdn.example.com/img/respond.proxy.gif?2013012401" id="respond-redirect" rel="respond-redirect">
<script src="http://cdn.example.com/js/respond.proxy.js?2013012401"></script>
When that also failed, I amended my <head> section to this:
<link rel="stylesheet" href="http://cdn.example.com/css/main.css?2013012401">
<script src="http://cdn.example.com/js/modernizr-2.6.2.min.js?2013012401"></script>
<script src="http://cdn.example.com/js/respond.min.js?2013012401"></script>
<link href="http://cdn.example.com/respond-proxy.html?2013012401" id="respond-proxy" rel="respond-proxy">
<link href="/img/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<script src="/js/respond.proxy.js"></script>
I'm not sure what else I can try really to get this to work. It works fine in a local Dev environment that's not using the CDN, but in the Live environment this Respond.js CDN/X-Domain Setup is not working. Could it possibly be related to the cache-buster query string added to the CDN assets? Why is my original example not working when all assets are being served from the same domain?
Edit: Here's the error that's thrown in IE8
This issue was caused by the respond-proxy.html file reference containing a query string (respond-proxy.html?2013012401). Removing the query string from this file causes the above implementation to work.

Categories