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.
Related
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
I am currently using PhoneGap. I am using eclipse as my IDE. The tablet that I am developing on is a Samsung Galaxy Tab 10.1, android version 4.0.4.
Now I am trying to open a PDF on the device through my app. However it is not working. I followed the tutorial on this page, https://github.com/markeeftb/FileOpener.
Here are the changes I have made.
-> In the src folder, I made a new folder called com.phonegap.plugins.fileopener -> I copied and pasted the FileOpener.java file into the folder. -> Then in the config.xml file located in the xml folder, I added the line
<plugin name="FileOpener" value="com.phonegap.plugins.fileopener.FileOpener"/>
-> I also added the line
<script type="text/javascript" charset="utf-8" src="fileopener.js"></script>
into my index.html file
Here is the code for index.html
<!DOCTYPE HTML>
<html>
<head>
<title> PhoneGap </title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="fileopener.js"></script>
</head>
<body>
<h1>PDF Open Tester</h1>
open
</body>
</html>
Just as further information, once I have connected the tablet on my computer, when I right click on 1.pdf and check properties the file location is Computer\GT-P7510\Tablet
When I run this project on the tablet and click on the open link. The adobe reader app opens up on the home page saying "The document could not be opened". What is going wrong why is the pdf not opening with Adobe Reader? Please help if you can I would really appreciate it.
-----------------------------------After Edit 1-----------------------------------------------------------------------------------
I found the specfic error that is happening. The error is Object # has no method 'exec'
The FileOpener pluggin is expecting a URI, and you are passing it a filepath.
change:
'/sdcard/Course Content Files/1.pdf'
to:
'file:///sdcard/Course Content Files/1.pdf'
I managed to use jQuery mobile with phonegap and the app is working on iPhone and blackberry.
But when i try to use jquery mobile with phonegap for Qt (cordova-qt + Qt Creator) jquery didn't work. is it possible to do that?
I added the following lines to the index.html file found in the www folder of the cordova qt library:
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" type="text/css"/>
<script language="javascript type="text/javascript" charset="utf=8" src="jquery.js"> </script>
<script language="javascript type="text/javascript" charset="utf=8" src="jquery.mobile-1.3.0.js"></script>
Then I added this jQuery files beside index.html, anything missing?
What isn't working? Trying cordova-qt too at the moment and using jQueryMobile is working pretty well.
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'm going through some beginners tutorials on ExtJS and when I try to load a .html file with some HTML code it doesn't work
here's the test.html with the ExtJS code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../ext-3.2.1/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('div1').load({
url : 'htmlFragment.html',
scripts : true
});
});
</script>
</head>
<body>
<div id='div1'></div>
</body>
</html>
and the htmlFragment.html is just as it says, a fragment of HTML code
<div>Hello there! This is an HTML fragment.</div>
both the file with the ExtJS code and the htmlFragment.html are in the same folder and I really see no reason for this not to work but it doesn't :(
all the other ExtJS examples I tried, DOM manipulation and other basic stuff worked just fine
I'm trying this on a Windows machine, and it doesn't work in any browser(FF, Opera, IE, Chrome)
Have you set your example in a Web Server?
Even though many examples work just directly open its local file on your browser (i.e. file:///C:/directory/example.html) many others require an actual web server to run properly (i.e.: http://localhost/path/example.html).
And I think local files won't work in this example as it has to performs an AJAX call to get the htmlFragment.html file.
Are you using any of the following (or any other) web server?
Apache HTTP Server
lighttpd
Apache Tomcat
Internet Information Server
Visual Studio Built-in Web Server
Do u have firebug enabled on your machine? If so, do you get any exceptions on the firebug console? It could be that the ext library path is incorrect. Also check firebug to see if your ext library files are being loaded.