Phonegap error on loading an external url? - javascript

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.

Related

How to load local text information into <div> section

I am trying to draw a diagram by using below codes.
It works well.
As you can see, I should put some text information in the div.
If there is a sample.txt which includes this information in local drive, can I load it into div section dynamically instead of putting it manually?
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sample Diagram</title>
</head>
<body>
<div class="diagram">
Title: Diagram
<!-- Participant FIRST
Participant SECOND
Participant D
Participant F
Participant G //-->
E->F: 2
SECOND->FIRST: 1
FIRST->SECOND: 1
C-->SECOND: Request token
C->E: 2
SECOND->FIRST: Forward request
FIRST->>C: Send token
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.4/sequence-diagram-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
UPDATE
/test/index.html
/test/js/index.js
/test/js/sample.txt
/test/sample.txt
index.js
// js-sequence-diagrams by bramp <http://bramp.github.io/js-sequence-diagrams/>
$(".diagram").sequenceDiagram({theme: 'simple'});
$(function(){
$.get("sample.txt", function(data) {
$(".diagram").text(data);
});
});
sample.txt
Title: Diagram
SECOND->FIRST: 1
FIRST->SECOND: 1
C-->SECOND: Request token
C->E: 1
SECOND->FIRST: Forward request
FIRST->>C: Send token
Without inner text
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sample Diagram</title>
</head>
<body>
<div class="diagram">
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.4/sequence-diagram-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Add a file-input element to the HTML page:
<input type="file" id="file" onchange="readTxT()"/>
And select sample.txt manually:
function readTxT(){
var reader = new FileReader();
var files=document.getElementById('file').files;
var f = files[0];
reader.onload = function(e) {
var text = reader.result;
$(".diagram").text(text).sequenceDiagram({theme: 'simple'});
}
reader.readAsText(f);
}
The simplest and easy way is to make get request to the server. And for that you have to use jQuery $.get function. Which will make a request for you.
Here is reference to jQuery.get()
USAGE
// make sure the PATH is correct for `sample.txt`
// $.get(your URL to the file, callback function)
$(function(){
$.get("sample.txt", function(data) {
$(".diagram").text(data);
});
});
If the sample.txt is available on the (http) server the site is hosted with (may be localhost), yes.
Assuming your directory structure is like this (/var/www/ is the server's root directory in my example):
/var/www/
index.html (The file without the diagram content)
sample.txt
js/
index.js
Place this in your index.js:
window.onload = function() {
$.get("sample.txt", function(data) {
$(".diagram").text(data).sequenceDiagram({theme: 'simple'});
});
}
If you're not using any HTTP server, you can't load files from the file system directly - that's part of the Javascript sandbox (security concept).
I would then recommend using something like in lx1412's answer, a manual file chooser is the only way how this could work then.
I've tested the script above using Firefox and an HTTP server; and my edit of lx1412's answer using Firefox without an HTTP server.

Reference Error With Local Files In Phonegap

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.

AngularJS error while using ngAudio

I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js

Cordova Network Information Plugin: broken?

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.

Phonegap doesn't show alert

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.

Categories

Resources