Menu
Hai i am new in phonegap and ratchet framework.I am trying to load external script with push.js. Here is my js file contents
function init(){
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
alert("device ready for use");
}
var checkPage = function(){
alert("push");
var scriptName;
var scriptsList = document.querySelectorAll('script.js-custom'); // Add a "js-custom" class to your script tag
for (var i = 0; i<scriptsList.length;i++) {
// Handle scripts in separate files by assigning the script file name to its id.
// We save it in a variable because the ".done" callback is asynchronous.
scriptName = scriptsList[i].id; // IMPORTANT: Only one loadable script per page!
$.getScript("js/" + scriptName)
.done(function (script, textStatus) {
eval(script);
alert("ok");
})
.fail(function(){
alert("error");
});
}
};
window.addEventListener('push', checkPage);
}
Here is my html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.min.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="js/ratchet.min.js"></script>
<script src="js/jquery.js"></script>
<script src="cordova.js"></script>
</head>
<body onload="init()">
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="two.html">
<strong>Another page</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</div>
</div>
Here is my two.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700"> -->
<link rel="stylesheet" href="ratchet.min.css">
<script src="ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">Two</h1>
</header>
</body>
<div class="content">
<script src="js/sample.js" class="js-custom" id="sample.js"></script>
</div>
</html>
But i run the project i get
Uncaught ReferenceError: CustomEvent is not defined at file:///android_asset/www/js/ratchet.min.js:10
please help me.
407
It's because window.CustomEvent is missing in you WebView implementation.
Add this Polyfill and it works every times. I found the solution on Mozilla Developer Network:
/*
* Polyfill for adding CustomEvent
* see : https://developer.mozilla.org/fr/docs/Web/API/CustomEvent
*/
if (!window.CustomEvent) { // Create only if it doesn't exist
(function () {
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
}
You do not have cordova in your second html file. When you load two.html, your browser destroys the previous page and all the scripts associated with it. You should do everything in single page, I suggest using an mvvm framework such as angularjs, emberjs etc.
So, to be exact, your second html does not have cordova, so deviceready is never fired for that file. However, for the first html, you have deviceready and ratchet references. But, in there, you don't have your sample.js reference with js-custom. So, inside deviceready (when in first html), your ratchet is complaining about missing js-custom reference.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
