This is a page where I am attempting to load a backup from the file system if the device cannot connect
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/about.css"/>
</head>
<body>
<ons-screen>
<ons-navigator title = "About">
<ons-page id="page" font-align="center">
</ons-page>
</ons-navigator>
</ons-screen>
</body>
<script type="text/javascript">
var page = document.getElementById("page");
if(navigator.connection.type != Connection.NONE){
page.innerHTML='<iframe src="http://www.website.com/about/" style="width:100%; height:100%;"></iframe>';
}else{
page.innerHTML='<iframe src="aboutBackup.html" style="width:100%; height:100%;"></iframe>';
}
</script>
</html>
I installed the plugin using the github instructions (https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md)
I can't figure out why, but I get Uncaught TypeError: Cannot read property 'type' of undefined on line 22 where I check the connection type.
You need to add cordova.js in your file.
<script type="text/javascript" src="cordova.js"></script>
Then listen to device ready function and shot for the GOAL
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
if(navigator.connection.type=='none')
{
alert("Wait I'm offline.");
}
else
{
page.innerHTML='<iframe src="aboutBackup.html" style="width:100%; height:100%;"></iframe>';
}
}
</script>
Anything you do have to be after device ready function is fired. And without cordova.js cordova plugins won't work.
Related
I'm trying to run the below file. It runs perfectly fine when I run it on a local drive but if I place it on a network drive it no longer works. Any idea why this might be?
The below is code that I am trying to run. It is using pivottable from here: https://github.com/nicolaskruchten/pivottable.
<!DOCTYPE html>
<html>
<head>
<title> Demo</title>
<!-- external libs from cdnjs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- PivotTable.js libs from ../dist -->
<link rel="stylesheet" type="text/css" href="../dist/pivot.css">
<script type="text/javascript" src="../dist/pivot.js"></script>
<style>
body {font-family: Verdana;}
</style>
<!-- optional: mobile support with jqueryui-touch-punch -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<script type="text/javascript">
// This example shows custom aggregators using
$(function(){
var tpl = $.pivotUtilities.aggregatorTemplates;
$.getJSON("col.json", function(frontier) {
$("#output").pivotUI(frontier, {
rows: ["Manager"], cols: ["Sector"],
aggregators: {
"Number of Positions": function() { return tpl.count()() },
"Manager Weight": function() { return tpl.sum()(["Port"])},
"Benchmark XGCC Weight": function() { return tpl.sum()(["Bench"])},
}
});
});
});
</script>
<div id="output" style="margin: 30px;"></div>
</body>
</html>
File:/// urls will run in a different context than HTTP/HTTPS and other contexts (internal, public, private, unsafe). What limitations in question depend on the specific browser, the OS and the context itself.
If you must execute JavaScript within HTML, the safest and most assured way to run is to have it running via a web server.
Also worth noting, there are a few local/relative files. ../dist/pivot.js and ../dist/pivot.css are you sure you're saving those files, and they are in the correct relative path as well?
I am having issues, it would seem, with using local files with my phonegap application. I am trying get a simple app up and running to scan a qr code and just display the text that was scanned. However, it is not working for some reason. I can run any JavaScript I want as long as it is in the index.html file. For some reason, whenever I try to call a function from an included js file, I get a reference error. In this code I am getting 'ReferenceError: scan_qr_code is not defined' and 'ReferenceError: onDeviceReady is not defined'. Both of these functions are from the main.js file which is supposed to be included from the index.html file. I downloaded and inspected the apk file and these files are being included in the build but for some reason are not working. Anyone have any suggestions or advice? This is driving me nuts. Seems like this should be a rather straight forward thing. Also, I'm building with the PhoneGap version as 3.7.0
I am using PhoneGap build for compiling and my folder structure is setup as thus.
/www
/scripts
main.js
jquery-1.11.3.min.js
/styles
main.css
index.html
config.xml
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="scripts/barcode.js"></script>
<link href="styles/main.css" rel="stylesheet" />
<title> </title>
<script>
$(function(){
alert('here');
try{
$("#scan_button").click(function(){
alert('Button Clicked 2');
try{
onDeviceReady();
scan_qr_code();
}catch(e){
alert(e);
}
});
}catch(e){
alert(e);
}
});
document.addEventListener("deviceready", function(){
try{
$("#scan_button").click(function(){
alert('Button Clicked');
try{
scan_qr_code();
}catch(e){
alert(e);
}
});
scan_qr_code();
}catch(e){
alert(e);
}
}, false);
</script>
</head>
<body>
<button id="scan_button">Scan QR Code</button>
</body>
</html>
main.js
$(function(){
});
function onDeviceReady(){
alert('Device Ready Fired');
}
function scan_qr_code(){
try{
alert('Scanning');
// Scan the QR code
barcode_app.scan(function(result){
code = result.text;
// Just grab the text from the scanned code
alert(code);
scan_qr_code(){
});
}catch(e){
alert(e);
}
}
config.xml
<preference name="phonegap-version" value="3.7.0" />
<access origin="*"/>
This is going to be a very wild guess, but it look like your main.js file has an extra { that shouldn't be there.
scan_qr_code(){
This could be breaking your code, and that's why your functions from main.js are undefined.
Here's a plunker showing that the code would run just fine if you remove the extra {. Well... barcode_app is now showing as undefined, I assume it's part of the scripts/barcode.js file, which by the way, is not included in your project structure either.
I am trying to load an external url on my iOS phonegap application.
I am using this on my index.html :
<!DOCTYPE html>
<html>
<head>
<title>window.open Example</title>
<script src="cordova-2.1.0.js"></script>
<script src="js/plugins/PushNotification.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// external url
var ref = window.open(encodeURI('http://apache.org'), '_blank', 'location=yes');
// relative document
ref = window.open('next.html', '_self');
}
</script>
</head>
<body>
</body>
</html>
However i get the error :
Failed to load webpage with error: The requested URL was not found on this server.
** I did turn the OpenAllWhitelistURLsInWebView in the cordoba.plist to yes.
Any idea??
Do you have next.html in your www folder? Your code is trying to load apache.org and without waiting for it to load, its trying to load next.html. If next.html is not present in the www folder, it will give this error.
why phonegap doesn't show alert notification ? (running on iPhone 5.1.1 , phonegap phonegap-2.1.0-0-g26d211b, mountain lion 10.8.2, xcode 4.4.1)
<html>
<head>
<link rel="stylesheet" href="themes/css/apple.css" title="jQTouch">
<script src="src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
try
{
navigator.notification.alert('Hello', ok, 'Title', 'Button!');
}
catch(e)
{
alert("doesn't support!!");
}
}
function ok() {}
</script>
</head>
</html>
Because you are trying to show an alert before phonegap/cordova framework is loaded.
$(document).ready(function(){ is not going to help you here, you must use this event to check if phonegap is successfully loaded:
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
// Now safe to use the PhoneGap API
}
More about this event: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
PhoneGap consists of two code bases: native and JavaScript. While the
native code is loading, a custom loading image is displayed. However,
JavaScript is only loaded once the DOM loads. This means your web
application could, potentially, call a PhoneGap JavaScript function
before it is loaded.
I get the following error when trying to use the TorchPluging:
file:///android_asset/www/web/index.html: Line 12 : Uncaught TypeError: Cannot read property 'Torch' of undefined
I added the plugin to config.xml (I think it has changed from plugins.xml to config.xml in the newer phonegap versions?)
The following is my entire index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Flashlight</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Torch.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function turnTorchOn(){
window.plugins.Torch.turnOn(
function() { console.log( "turnOn" ) } // success
, function() { console.log( "error" ) }); // error
}
</script>
</head>
<body>
<button id="turnOnButton" name="turnOnButton" > Turn on Flashlight</button>
<script>
$('#turnOnButton').click(function(){
alert("will turn on now");
turnTorchOn();
alert("called turnOn done");
});
</script>
</body>
</html>
It actually isn't that hard to update an older style plugin to one that will work in 2.0.0+. You would need to:
Modify the JS to the new cordova.define() style of declaring plugins.
Update the package reference to org.apache.cordova.* from com.phonegap.* in the Java code.
Make sure you are not calling any deprecated API's.
I've written a couple of blog posts that cover the topic. If you do follow them an update the Torch plugin you should submit a pull request so everyone can enjoy your work.
2.0.0 Plugin - http://simonmacdonald.blogspot.ca/2012/08/so-you-wanna-write-phonegap-200-android.html
Deprecated API's - http://simonmacdonald.blogspot.ca/2012/07/phonegap-android-plugins-sometimes-we.html