This is a migrated thread and some comments may be shown as answers.

cannot load external scripts

11 Answers 236 Views

Report a bug

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

11 Answers, 1 is accepted

answered on 16 Mar 2013, 11:30 AM

Hello Gal,

When referencing external resources you need to include the full protocol in the URL. With that, your example becomes: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js". This is because Cordova apps run in file:// URLs on the device and scheme-less URLs get resolved to file:// rather than http:// or https://. For instance, your app's index.html on Android is actually file:///android_asset/www/index.html.

However, I'd suggest including whatever resources you need in your app, rather than downloading them from the web. This accomplishes two things: your app loads faster and it can run offline. What's more, Apple rejects apps that don't work at all when the device is offline. So it's a better practice to include the JavaScript and CSS your app needs to run in the app itself, rather than referencing it externally.

Regards,
Yavor Georgiev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

answered on 19 Mar 2013, 01:23 PM

Hello Gal,

I've tried to load jQuery from the Google CDN with HeadJS both on the simulator and on an iOS device and it has worked for me. I just modified the black application template. Does this code run for you? Can you modify it to match your app?

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content=

"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"

/>

<link rel="stylesheet" type="text/css" href="css/index.css" />

<script src="js/head.min.js"></script>

<title>Hello World</title>

</head>

<body>

<div class="app">

<h1>Apache Cordova</h1>

<div id="deviceready" class="blink">

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript">

app.initialize();

head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js", function () {

$(".app").css("background-color", "red");

});

</script>

</body>

</html>

Also, I'll need to know the device and OS version you're observing this behavior on so that I can try to replicate your environment as closely as possible.

Kind regards,
Yavor Georgiev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

answered on 19 Mar 2013, 03:43 PM

well, I used the kendo UI template to start with. This is the code I have:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>



<script src="scripts/head.min.js"></script>
<script>
head.js("http://maps.google.com/maps/api/js?sensor=true",
"scripts/hello-world.js",
function() {

// all done

});
</script>






<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
</div>

<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
<h1>Say Hello!</h1>
<div id='helloWorldInput'>
<label for="txtName" style="display: inline-block;">Enter your name:</label>
<input type="text" id="txtName" value="" />
</div>
<div id='helloWorldText' style="display:block;"></div>
<div class="buttonArea">
<a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
<a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>
</div>
</div>

<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
<h1>My Location</h1>
<div id="geoLocationContainer">
<div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
<a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
<div id="map_canvas"></div>
</div>
</div>

<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>

<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>

<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>

answered on 19 Mar 2013, 05:37 PM

Hi Gal,

I apologize if I was unclear. I'd suggest exporting your project and putting it on a webserver somewhere and then access it in Mobile Safari. The Cordova parts will fail, of course, but we just need to see if HeadJS will load the scripts correctly in the native browser.

Cordova apps use the same rendering engine as Mobile Safari so it would be very helpful to see if HeadJS works for one and not the other or not at all.

However, the code works fine in the Graphite Simulator so I don't really know what could be causing this issue. It certainly isn't the whitelist as the Cordova whitelist permit all domains by default.

Kind regards,
Yavor Georgiev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

answered on 19 Mar 2013, 06:19 PM

Hi Gal,

I managed to solve the problem. It turns out that the Google Maps API already has a script loader similar to HeadJS it uses internally. According to this issue on GitHub, you need to use special handling when asynchronously loading the Google Maps API and pass a callback function (much like JSONP) to the Google Maps API loader.

All you need to do is to pass the name of the callback function in the URL when loading the Google Maps API like so: http://maps.google.com/maps/api/js?sensor=false&callback=getLocation. This will invoke the getLocation function defined in scripts/hello-world.js and will make the Refresh Location button work.

Kind regards,
Yavor Georgiev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

cannot load external scripts

11 Answers, 1 is accepted