I load my index.html from my android app which is built using Cordova. I have included my jquery file correctly, but I still get the error uncaught reference error jQuery is not defined.
<html>
<head>
<title id="title" name="title"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../abc/js/mydevice.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js">/script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, false);
});
})(jQuery);
</script>
</head>
<body>
</body>
</html>
I get the error Uncaught Reference error jQuery is not defined from document ready function. I get the same error from mydevice.js file.
mydevice.js file looks like below
jQuery(document).ready(function(){
/// body of the function here.....
});
My java code to launch index.html looks like below
public class AppActivity extends CordovaActivity
{
public static final String INDEX_FILE_PATH = "file:///android_asset/www/index.html";
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// super.loadUrlTimeoutValue = 1000 * 60;
super.init();
// super.loadUrl(INDEX_FILE_PATH);
loadUrl(launchUrl);
}
}
I have gone through this link uncaught reference error. Not sure what I am missing?
I found out, I get this error when I am using a proxy on my WIFI in android simulator. If I don't use that proxy, I don't get this error.
If I remove the proxy I had added, this works fine without any error. Looks like a cross-domain issue.
Related
I am running my Angular2/Ionic2 app under Android 4.4.4 on a real device; however, I am getting a white black screen, after inspecting the device I got the following error:
Uncaught Cannot resolve all parameters for 'App'(?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'App' is decorated with Injectable.
I've tried to run it on Android 5.1, it worked fine!
I've read some posts saying that in order to hide the error, I should use crosswalk, but I believe that Ionic2 support Android versions >= 4.4.4 So it should work without crosswalk!
My index.html:
<html dir="ltr" lang="en">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.4/moment-timezone.js"></script>
<script src="lib/polyfill.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/zone.js"></script>
<script src="build/js/Reflect.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
</body>
</html>
App.js
export class MyApp {
static get parameters() {
return [[Platform], [MenuController],[Http], [TranslateService]];
}
constructor(platform, menu, http, translate) {
this.menu = menu;
this.platform = platform;
this.http=http;
this.translate = translate;
this.guestViewBool = localStorage.getItem('guestView');
platform.ready().then(() => {
});
}}
ionicBootstrap(MyApp, [], {
iconMode: 'ios',
backButtonIcon: 'ios-arrow-back',
prodMode:'true',
});
I'm having a strange problom where my cordova app on android fails to load js/css files where if I run in the browser It does not.
from remote debugging I got these error messages:
file:///css/all.css Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///js/shims.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///js/app.js Failed to load resource: net::ERR_FILE_NOT_FOUND
Here is my project stracture
config.xml
www
js
jsFiles
css
cssFiles
app
more html files
index.html
My index.html file looks like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<base href="/">
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/all.css">
</head>
<body>
<sd-app>Loading...</sd-app>
<script>
if (!Object.hasOwnProperty('name')) {
Object.defineProperty(Function.prototype, 'name', {
get: function() {
var matches = this.toString().match(/^\s*function\s*((?![0-9])[a-zA-Z0-9_$]*)\s*\(/);
var name = matches && matches.length > 1 ? matches[1] : "";
Object.defineProperty(this, 'name', {value: name});
return name;
}
});
}
</script>
<script>
// Fixes undefined module function in SystemJS bundle
function module() {}
</script>
<script src="./js/shims.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
For anyone interested in the future, I solved this problem, as I'm using angular 2 in my app, I defined as you can see in my code snippet a base url for my app :
<base href="/">
This becomes a problem in cordova and should be deleted for an android/ios app.
if css and js folder are in same level as index.html you should link them like this :-
<link href="css/android/prelogin.css" rel="stylesheet">
<script type="text/javascript" src="cordova.js"></script>
<script src="scripts/lib/jquery/jquery.1.9.1.js"></script>
<script src="scripts/lib/jquery/jquery.mobile-1.3.2.js"></script>
see screen shot for more clarity
I tried to convert a react application into a mobile app, i got success with iOS, but now, when I'm trying with android, it shows the white screen of death, and the chrome remote inspector doesn't show any significant reason, this is the chrome log
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MMJ Recs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/main.css"/>
<script>
window.prompt = function(){
}
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script src="./js/index.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/vendor.js"></script>
<script src="./js/vendor.bundle.js"></script>
<script src="./js/build.js"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_AzADtnJ7sM7pQJu32JOmHB3M');
</script>
</body>
</html>
and this is my main.js
import React from 'react';
import Router from 'react-router';
import routes from './routes';
import ReactDOM from 'react-dom';
//ReactDOM.render(routes, document.getElementById('app'));
function startApp(){
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
function startAppCordova(){
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
window.onload = function(){
var url = document.URL;
var isSmart = (url.indexOf("http://") === -1 && url.indexOf("https://") === -1);
if( isSmart ){
document.addEventListener('deviceready', startAppCordova, false);
}
else{
startApp();
}
}
I suspect it could be a problem with the JavaScript engine, for older phones which have older JS engines you can use a Polyfill downloaded from https://cdn.polyfill.io/v2/docs/, which I used it to sort out this error which I saw when running adb logcat with my phone connected and opened the app :
Uncaught TypeError: Object function Object() { [native code] } has no method 'assign
Run adb logcat to see what the error is in your case, you probably won't see it from the Chrome console
I'm have trouble using the widget dojox.mobile.TextBox in my Android app.
Here is the simple html file:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="dojo/dojox/mobile/themes/custom/custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad();">
<div>
<input data-dojo-type="dojox.mobile.TextBox" placeHolder="Enter LAST name" />
</div>
<script type="text/javascript" charset="UTF-8" src="dojo/dojo/dojo.js" ></script>
<script type="text/javascript" charset="UTF-8">
// Load the widget parser and mobile base
require([
"dojox/mobile/parser",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/TextBox"
], function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
</script>
</body>
</html>
And Here is the error I get:
06-04 15:22:52.304: E/Web Console(28791): Uncaught Error: declare dojox.mobile.TextBox: mixin #1 is unknown. Did you use dojo.require to pull it in? at file:///android_asset/www/dojo/dojo/dojo.js:15
I also tried with dojox.mobile.app.TextBox but then I get:
06-04 15:46:16.192: E/Web Console(29566): Uncaught TypeError: Cannot read property 'dynamic' of undefined at file:///android_asset/www/dojo/dojo/dojo.js:15
I made sure I have the last version of dojo.
If anybody has an answer it would really help me.
Thanks.
I would start by moving:
<script type="text/javascript" charset="UTF-8" src="dojo/dojo/dojo.js" ></script>
<script type="text/javascript" charset="UTF-8">
// Load the widget parser and mobile base
require([
"dojox/mobile/parser",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/TextBox"
], function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
into the head tag area and add "dojo/domReady!" to you dojo require block. You should probably add another thing in the head to configure dojo properly:
<script>dojoConfig = {
async: true,
parseOnLoad: true
}
</script>
You should study all the examples located here:
http://download.dojotoolkit.org/release-1.9.0/dojo-release-1.9.0/dojox/mobile/tests/
I'm working on a phonegap 1.9.0 app for android using ember and am trying to hide my splash screen once the app is loaded instead of waiting for the specified timeout.
My splash screen displays but I cannot successfully call
navigator.splashscreen.hide()
The inclusion of this line leads to the error:
Error: SyntaxError: Unexpected token ' at file:///android_asset/src/cordova-1.9.0.js:1012
I have tried downloading cordova-1.9.0.js again and using version 2.0.0 instead but encountered the same problem.
Here is my html/js.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" title="master" type="text/css" href="css/master.css" />
<title>Cordova Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="ember-0.9.8.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when Cordova is loaded.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
function onDeviceReady() {
// Now safe to use the Cordova API
console.log("device ready...")
navigator.splashscreen.hide()
}
</script>
</head>
<body onload="onLoad()">
<div id="content"></div>
</body>
</html>
and the activity code...
public class myApp extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/src/index.html", 5000);
}
}
Try below code to hide splash screen:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
cordova.exec(null, null, "SplashScreen", "hide", []);
}
Look at my previous answer: Splash Screen in Cordova
I am using Cordova 2.1.0 and now 2.2.0. When calling navigator.splashscreen.hide(), the Splash Screen didn't disappear. Using the following code, it worked:
private static native void hideSplashScreen() /*-{
$wnd.Cordova.exec(null, null, "SplashScreen", "hide", []);
}-*/;
Hope this helps