I've been banging my head on this one for a few days. After getting a number of "object not defined" errors when trying to create a new FileTransfer() object, it looks like the problem is more basic -- somehow the DeviceReady event is not firing.
Stack Overflow has a lot of hits on this issue, but most of them have to do with pre-3.x cordova builds that had a different architecture (I'm on 4.1.2). I've tried the suggestions in the newer topics I could find -- removing and adding plugins, updating cordova, etc. -- to no avail. To try to isolate the issue, I've commented out the startup code to just a few lines:
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Blah</title>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">
<link href="res/topcoat/css/topcoat-mobile-light.min.css" rel="stylesheet">
<link href="res/css/styles.css" rel="stylesheet">
<link href="res/css/pageslider.css" rel="stylesheet">
<script data-main="js/main" src="lib/require.js"></script>
</head>
Main.js:
require(["app/Application"], function (Application) {
"use strict";
document.addEventListener("deviceready", function(){
$('body').html("<p>device is ready</p>");
},true);
$('body').html("<p>waiting...</p>");
});
Instead of displaying "device is ready" in the body after a bit, the screen just displays "waiting...". This happens on both the iOS emulator and the browser (cordova emulate browser).
Cordova info:
$ cordova -v
4.1.2
Plugin info:
$ cordova plugins
org.apache.cordova.globalization 0.3.3 "Globalization"
(I get the same results if Globalization isn't there).
Is there some other place I should be looking? I'm running from the command line, if that makes a difference.
I think in this case you need to include cordova.js in your application, because I don't see cordova.js in your example
<script src="cordova.js"></script>
Note: path to cordova.js depends on where it located in your app
That did not initially fix it for me until I removed
< meta http-equiv="Content-Security-Policy" content=".." / >
I recently had this same issue, but in my case cordova.js was already properly included.
Eventually what worked for me was a simple remove and add of the ios platform:
cordova platform remove ios
cordova platform add ios
It had been quite a while since I had completely re-built the ios platform and other major changes had taken place during that time (Cordova upgrade, XCode upgrade, etc). It's possible that my config.xml or existing ios build was somehow incompliant with the latest Cordova requirements.
I have been trying to fix this issue for DAYS and I finally got deviceready to trigger. The issue was that I had extended the js Object to insert my own hide and show commands. Removing those lines allowed deviceready to trigger:
Object.prototype.hide = function(){
this.style.display = 'none';
}
Object.prototype.show = function(){
this.style.display = 'initial';
}
note: I also had to have the line <script src="cordova.js"></script>
as mentioned by Alexander T
Related
I encountered a very strange behaviour in my ionic/cordova app on the windows phone 8.1 platform, where i implemented an instant messenger. I teared my whole application down to a simple cordova (starter) application to eliminate potential side effects with other app related code like other css classes for example. But the issue still remains...
The issue
My app contains an html input element at the bottom of the page, where the user can enter a text for text-messaging. Whenever this input gets focused, the keyboard (inputpane) appears. But after the first focussing (by clicking the 2nd++ time), the input shifts up too far or gets pushed away by the keyboard. These are the screen captures:
Everything is fine on first focus:
Hiding the Keyboard by pressing "back button" and refocussing the input leads into that:
It seems like the whole application gets pushed away by the keyboard out of the screen, since the header bar disappers as well. After tapping on the screen, the view renders correctly (Picture 1), but the usability remains still like a mess. I only figured out, that the space below the input element belongs to the <body> of the DOM.
What i did so far
I started with creating a plain cordova app to narrow down all potential side effects and error sources (Source code on my Github). This was my procedure:
Created a new cordova application with cordova 5.1.1
cordova platform add wp8 & cordova build wp8
Opened the wp8 project file with Visual Studio 2013 and upgraded to a windows phone silverlight 8.1 application (see picture below), because this is a requirement by our app
And started to copy the essential html/css/js code to reproduce the issue in the plain application with:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Hello World</title>
</head>
<body>
<div class="bottom">
<input type="search" placeholder="Search">
</div>
</body>
</html>
CSS
.bottom {
position : absolute;
right : 0;
left : 0;
bottom : 0;
}
input {
background-color: pink;
width: 100%;
}
Result
First of all, I thought the problem disappeared. But after some trying I encountered the same behaviour again. It happens quite rarely but still (only once in ~30 times). For me this was the evidence, that for example ionic is not responsible for this issue (see picture below):
It already took days and hours to investigate this behaviour and to try all potential solutions i have found in the world wide web until today. These are for example:
Altering the CordovaView Margin in the MainPage.xaml
Resizing the app natively on keyboard events
Adding event listener to my javascript code
Additionally i installed WEINRE to debug my web related code on the windows phone 8.1 device (Nokia Lumia 930) with minor success. The same issue also appears in a simulator. I can only image, that upgrading to a silverlight 8.1 app is the essential breaking changer.
Have you tried using this $ionicConfigProvider.scrolling.jsScrolling(false) ? In order to enable the native scrolling.
I have the exact same issue.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(false);
// Or for only a single platform, use
// if( ionic.Platform.isAndroid() ) {
// $ionicConfigProvider.scrolling.jsScrolling(false);
// }
}
I am very new to using Intel's XDK, I already have a web app that I need to convert to an android app. I have tested the html web app thoroughly and so far, it works perfectly in the browser. The problem is that when I imported it to the XDK, it doesn't seem to work on the emulators. I searched everywhere and no one else seems to have the same problem, so it must be I'm missing something. I know you have to insert an extra javascript (which I already did) but so far, it still doesn't work. Can anybody here point me to the right direction? Thank you in advance.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width target-densitydpi=device-dpi initial- scale=0.1 maximum-scale=0.5 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>King</title>
<style>
html {
height:100%;
}
body {
background-color: #000000;
margin:0;
height:100%;
}
</style>
<meta name="viewport" content="user-scalable=yes, width=1024" />
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<div style ="margin:auto;width:1024px;height:768px">
<div id="king_hype_container" style="position:relative;overflow:hidden;width:1024px;height:768px;">
<script type="text/javascript" charset="utf-8" src="King.hyperesources/king_hype_generated_script.js?7046"></script>
</div>
</div>
</body>
</html>
Maybe I'm putting the intel xdk in the wrong place in javascript?
Do what #rscohn2 suggests (make that "king" script is local to your project, avoid loading it over the network if at all possible), but also take a look at this "beefier" template which I've provided to people who are trying to turn a web app into a webview app. There are lots of comments and console.log messages to help you figure out what's going on, but, in essence:
wait for the custom "app.Ready" event to kick off your app
consider when you are loading your third-party and custom JS scripts (see the README)
It probably isn't loading the king_hype_generated_script.js. You could see that by popping up the debugger in the emulator. You can do that by clicking on the bug icon in the top left of the screen and then looking at the messages in the console tab. you probably want to make king_hype_generate_script.js a static file and copy into your project, or use an absolute URL pointing back at your server. Copying it into your project will give you better ability to work offline.
I'm creating a phonegap application that links to a website, which I want to load when the page is started up.
Here is what I've tried, a simple onload method calling a window.open function and I've tried a function that is called when the device is ready. I'm running the latest version of Phonegap, which is 3.5.0 and an Android HTC One running 4.4.2. Below is my code for deviceready. This code is within the index.html code, in the www folder within my Durandal applcation. I believe it's not working because I don't have the cordova.js file which is imported in the example code at this link http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#Events
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="lib/durandal/css/durandal.css" />
<script type="text/javascript" charset="UTF-8">
function onLoad () {
document.addEventListener("deviceready", function () {
window.open("http://google.com", "_system");
}, false);
}
</script>
</head>
<body onload="onLoad">
<div id="applicationHost"></div>
<script src="lib/require/require.js" data-main="app/main"></script>
</body>
</html>
Thank you for any help. This is my first stack overflow question. Please tell me if my question format isn't right and how I can improve it for future questions. Also, please suggest other ways that I can open a window on app start up using phonegap. Another option I've considered is developing an app with Android and Java, create a WebView, but that doesn't give me the cross platform deployment I want for Android and Windows Phone and I'd like to write this simple app using HTML,CSS, JS using Durandal, and PhoneGap.
Add this line just after durandal.css addition link.
<script type="text/javascript" src="cordova.js"></script>
Without cordova.js deviceready function won't fire. You don't need to see right now where is that cordova.js. It'll be added automatically by phonegap. Right now just add this line.
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.
I am using JQTouch to create a Web App on the Homescreen using meta tag "apple-mobile-web-app-capable", but no matter how many times I clear the cache from within Settings, the Web App's Javascript is still an older cached version.
Strangely enough, if I set the meta tag's content to;
<meta name="apple-mobile-web-app-capable" content="no" />
...then add the Web App to the Homescreen, I get the latest version when I launch it.
Yet if I set the meta tag to;
<meta name="apple-mobile-web-app-capable" content="yes" />
...then add the Web App to the Homescreen, I get the older cached version.
PS. I can confirm that is only the javascript which will not refresh.
You could try adding a unique string to the end of your js include's src attribute (use a timestamp, for example). Bear in mind you'll have to change this unique string for each refresh you want to do, so you may want to consider doing lazy-loading (which may in itself solve your problem):
<script type="text/javascript" src="myScript.js?012345"></script>
This usually forces the browser into grabbing the latest version of the script. Might work...
This is a way that worked for me to clear completely the cache:
1-Delete the tabs in safari where there is your app.
2-Delete the icon of the app in the home screen.
3-Kill safari from the memory.
4-Go to settings/safari and press clear cache.
5-You can restart your iPhone/iPod if you want to be sure that it works
I found that using bundling feature in ASP.NET MVC solved this problem for me.
It automatically generates a bundled link of the form:
http://www.domain.com/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
The token after the v= changes if any file in the bundle changes, guaranteeing that browser requests for the bundle will get the latest bundle.
If you are jailbroken, just do this in the terminal
rm ./Library/Caches/com.apple.webapp/Cache.db
This drove me absolutely nuts. I tried killing Safari, clearing the cache, switching to private mode, and removing the web app from the home screen. None of those work, but what does work is temporarily loading the web app page in Safari itself and reloading.
If you're using add to home screen, you can add ?web_app_ready=1 to the install URL. Since that's not an end user procedure, adding a query string to every script (the answer above) will probably be more effective for non-developer environments.
Building off of what SquareFeet said, one could automatically pull the new file down every time with a unique GET tag appended to the filename, using PHP. For example:
<link rel="stylesheet" type="text/css" href="/css/global.css?
<?php echo(mt_rand(10000000, 99999999)); ?>
" />
Theoretically, the same task could be accomplished using JavaScript, albeit with some modifications to the web server:
<link rel="stylesheet" type="text/css" href="/css/global.css?
<div id="id"></div>
" />
<script language="Javascript" type="text/javascript">
document.getElementById("id").innerHTML = Math.floor((Math.random() * 10000) + 1);
</script>