I'm trying use the Facebook slider menu on iOS, with the PhoneGap. The problem is that I am not able to insert data in sqlite, When clicking on the save button I got this error:
"Uncaught ReferenceError: cordova is not defined".
This is the source:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<script type="text/javascript" src="../../js/SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("device ready");
}
function insert() {
console.log("Run1");
var db = window.sqlitePlugin.openDatabase({
name: "PHR.db"
});
db.transaction(function(tx) {
tx.executeSql(
'CREATE TABLE IF NOT EXISTS SignUp (firstname VARCHAR,lastname VARCHAR,email VARCHAR, password VARCHAR ,question1 VARCHAR, answer1 VARCHAR,question2 VARCHAR,answer2 VARCHAR, question3 VARCHAR,answer3 VARCHAR)'
);
});
db.transaction(function(tx) {
var fname = document.getElementById("fn").value;
var lname = document.getElementById("ln").value;
var emai = document.getElementById("em").value;
var passw = document.getElementById("pas").value;
var qus1 = document.getElementById("qs1").value;
var ans1 = document.getElementById("as1").value;
var qus2 = document.getElementById("qs2").value;
var ans2 = document.getElementById("as2").value;
var qus3 = document.getElementById("qs3").value;
var ans3 = document.getElementById("as3").value;
tx.executeSql(
'INSERT INTO SignUp (firstname,lastname,email, password ,question1 , answer1 ,question2 ,answer2 , question3,answer3) VALUES (?,?,?,?,?,?,?,?,?,?)', [
fname, lname, emai, passw, qus1, ans1, qus2, ans2, qus3,
ans3
]);
}, null);
});
}
</script>
you need to add
<script type="text/javascript" src="cordova.js"></script>
in the head tag
In your code :
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<script type="text/javascript" src="cordova.js"></script> //--> You missed this line.
<script type="text/javascript" src="../../js/SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
//Remaining code goes here ... ...
add the cordova script in your html file, int he head
I was in a very tricky situation with reactjs + cordova for mobile. This was specifically happening when trying to leverage cordova's datadirectory field on a mobile device, the prod build would error out.
The solution that worked for me
Simply reference window.cordova instead of cordova
Related
So I am developing an office add in which will essentially contain an iframe which will be running an application we own.
The problem is, I want to contantly record the url of the iframe so that i can save this to the addin state, aloowing us to use that information to load the iframe to the correct url each time the addin is reopened.
I cant figure out a way to output the url from within the iframe each time it changes? here is a sample of what i have, this doesnt contain the application just a couple of sample pages:
Home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
<!-- For the Office UI Fabric, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
</head>
<body>
</body>
</html>
Home.js
(function () {
"use strict";
// The initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var iframew = document.createElement('iframe');
iframew.src = '../SecondPage/SecondPage.html';
iframew.id = 'iframe1';
iframew.onload = iframeLoaded(this.contentWindow.location.href);
document.body.appendChild(iframew);
});
};
// Helper function for displaying notifications
function iframeLoaded(location) {
console.log("log", location);
}
})();
Cant understand why people are downvoting this question, it was a genuine issue
Anyway, for anyone interested I solved this by attaching a a function after the iframe loads which outputs the url of the iframe at set interval periods
var iframew = document.createElement('iframe');
iframew.id = 'iframe1';
var baseUrl = '#YOUR BASE URL#';
let openUrl = getProperty('openurl');
if (!openUrl) {
console.log('No saved url');
iframew.src = baseUrl;
}
else {
console.log('saved url');
console.log(openUrl);
iframew.src = openUrl;
}
//when iframe loads attach function to save at interval
iframew.addEventListener('load', function () { setInterval(function () { iframeLoaded(iframew.contentWindow.location.hash, iframew.contentWindow.location.href); }, 4000); });
document.body.appendChild(iframew);
here is the iframeLoaded Function which also does some manipulation of the url and calles another function which saves the url to the doocument settings of the add-in:
function iframeLoaded(hash, location) {
//if not in an analysis dont save
if (hash.indexOf('#/dataset/') !== -1 ) {
console.log("Same url")
return
}
//remove # from hash
hash = hash.substr(1);
//concatenate base and hash
let newUrl = baseUrl + hash;
console.log(hash)
console.log(newUrl);
//save
if (Office.context.document.settings) {
saveProperty('openurl', newUrl);
}
}
I am creating an O365 app and I have 2 .aspx files, when the user clicks on the O365 mail app, I want each of these pages to be loaded based on the subject of the mail.
Scenario 1: Mail subject contains '#'
result: load page1
Scenario 2: Mail subject does not contain '#'
result: load page2
I have tried having an intermediate .js file where I have written the logic,
but when I do window.location = "path_to_aspx_file",
only the html is loaded but the js files do not run.
My current implementation:
I have LandingLogic.js
(function () {
"use strict";
//The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
var sub = item.subject;
if (sub.indexOf("some text") > -1) {
window.location = "http://localhost:51776/File1.aspx";
}
else {
window.location = "http://localhost:51776/File2.aspx";
}
});
};
})();
After a bit of fumbling around.
I am able to navigate to each of these files now, but I am not sure how to access the mail subject from File1.aspx and File2.aspx.
Did you initialize the Office context before you using Office JavaScript API to get the subject? To redirect the HTML page easily, we can include the JavaScript like below:
Home.js:
/// <reference path="../App.js" />
(function () {
"use strict";
// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
RedirectHTMLPage();
});
};
function RedirectHTMLPage() {
var subject = Office.context.mailbox.item.subject;
if (subject.indexOf("#") != -1) {
window.location.href = "https://localhost:44300/page1.aspx";
} else {
window.location.href = "https://localhost:44300/page2.aspx";
}
}
})();
The HTML page for redirecting:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="../App.css" rel="stylesheet" type="text/css" />
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
I have tried having an intermediate .js file where I have written the logic, but when I do window.load = "path_to_aspx_file", only the html is loaded but the js files do not run.
Would you mind sharing the detail you using the “window.load”?
Fei Xue answer is correct . if you want to get subject from file2.aspx , add office.js reference and access subject same as file1.aspx inside the Office.initialize event
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
I have been testing with Jasmine 2.0.0 and it works without any problem.
But there's a problem when I append BlanketJS to my code.
I used a specRunner(https://github.com/alex-seville/blanket/blob/master/test/jasmine-requirejs/runner.html) that works with Jasmine 1.3.1. But It does not work when I replace Jasmine 1.3.1 with Jasmine 2.0.0,
Here's original code from BlanketJS repo:
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-html.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
<script type="text/javascript" src="../../node_modules/requirejs/require.js"></script>
<script type="text/javascript" data-cover-only="code/" data-cover-never="['all.tests','code/tests']"
src="../../dist/qunit/blanket.js"> </script>
<script type="text/javascript" src="../../src/adapters/jasmine-blanket.js"></script>
<script type="text/javascript">
if (window.require && typeof (window.require.config) === 'function') {
require.config({
baseUrl: './code'
});
}
</script>
<script type="text/javascript" src="code/all.tests.jasmine.js"></script>
<script type="text/javascript">
(function () {
window.blanketTestJasmineExpected=2;
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
var oldResult = htmlReporter.reportRunnerResults;
jasmineEnv.addReporter(htmlReporter);
/* this is just for our automated tests */
window.jasmine_phantom_reporter = new jasmine.ConsoleReporter;
jasmineEnv.addReporter(jasmine_phantom_reporter);
/* */
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
and I added Jasmine 2.0.0 files and changed this code like below:
....
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
....
The error messages printed:
Uncaught TypeError: Cannot read property 'env' of undefined jasmine-html.js:38
Uncaught TypeError: Object #<Env> has no method 'currentRunner' jasmine-blanket.js:76
How can I run this specRunner page without problems? Please give me a solution. thanks.
the Blanket adapter uses currentRunner but that doesn't exist in 2.0 anymore.
The Blanket Jasmine adapter needs to be updated as both this and the reporter interface has changed.
Open up your jasmine-blanket.js file and replace the code at the bottom with this:
BlanketReporter.prototype = {
specStarted: function(spec) {
blanket.onTestStart();
},
specDone: function(result) {
var passed = result.status === "passed" ? 1 : 0;
blanket.onTestDone(1,passed);
},
jasmineDone: function() {
blanket.onTestsDone();
},
log: function(str) {
var console = jasmine.getGlobal().console;
if (console && console.log) {
console.log(str);
}
}
};
// export public
jasmine.BlanketReporter = BlanketReporter;
//override existing jasmine execute
var originalJasmineExecute = jasmine.getEnv().execute;
jasmine.getEnv().execute = function(){ console.log("waiting for blanket..."); };
blanket.beforeStartTestRunner({
checkRequirejs:true,
callback:function(){
jasmine.getEnv().addReporter(new jasmine.BlanketReporter());
jasmine.getEnv().execute = originalJasmineExecute;
jasmine.getEnv().execute();
}
});
Then it will should as intended.
ETA - personally I'd switch to Istanbul instead, as Blanket seems to be sparsely updated (if at all) right now. Istanbul has more complete coverage stats (not just lines - branches, etc) and can export to lcov for tools like Code Climate. It works with Jasmine, or any test framework, flawlessly.
So now there is actually an adapter for 2.x version of jasmine. But I still had some trouble configuring it. Eventually I did configure everything right, so that is what I got:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="components/jasmine.css">
<script src="components/jasmine.js"></script>
<script src="components/jasmine-html.js"></script>
<script src="components/boot.js"></script>
<script type="text/javascript" data-cover-only="app/" src="components/blanket.js" data-cover-adapter="components/jasmine-2.x-blanket.js"></script>
<script src="components/blanket_browser.js"></script>
<script src="components/jasmine-2.x-blanket.js"></script>
<!-- sources -->
<script src="components/angular.js"></script>
<script src="components/angular-mocks.js"></script>
<script src="app/custom-forms.js"></script>
<script src="app/route-selector.js"></script>
<!-- tests -->
<script src="tests/custom-forms-tests.js"></script>
<script src="tests/route-selector-tests.js"></script>
</head>
<body>
</body>
</html>
Note: I used bower to retrieve jasmine and blanket, but there is some confusion towards what blanket files I had to reference, so:
"components/blanket.js" -> I got this file from dist/qunit/blanket.js
"components/blanket_browser.js" -> src/blanket_browser.js
"components/jasmine-2.x-blanket.js" -> src/adapters/jasmine-2.x-blanket.js
Note that I also use boot.js that comes with jasmine and it works fine. Hope this information helps someone.
i was trying to implement a simple push notification application using some plugins. a this moment i have an problem with a javaScript file when i click on a bouton how call a javaScript function called register , that show me an error :
Uncaught ReferenceError: Cordova is not defined at file:///android_asset/www/GCMPlugin.js
this is my GCMPlugin.js
(function () {
var GCM = function() {};
GCM.prototype.register = function(senderID, eventCallback, successCallback, failureCallback) {
if ( typeof eventCallback != "string") { // The eventCallback has to be a STRING name not the actual routine like success/fail routines
var e = new Array();
e.msg = 'eventCallback must be a STRING name of the routine';
e.rc = -1;
failureCallback( e );
return;
}
return Cordova.exec(successCallback,
failureCallback,
'GCMPlugin',
'register',
[{ senderID: senderID, ecb : eventCallback }]);
};
if (cordova.addPlugin) {
cordova.addConstructor(function() {
//Register the javascript plugin with Cordova
cordova.addPlugin('GCM', new GCM());
});
} else {
if (!window.plugins) {
window.plugins = {};
}
window.plugins.GCM = new GCM();
}
})();
the function register in index.js :
function register()
{ window.plugins.GCM.register("1193127317675", "GCM_Event", GCM_Success, GCM_Fail ); }
this is my index.html :
<!DOCTYPE HTML>
<html>
<head>
<title>M W A</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script src="GCMPlugin.js"></script> <!-- GCM Cordova plugin -->
<script type="text/javascript" charset="utf-8" src="jquery_1.5.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Include my Javascript routines -->
<script type="text/javascript" charset="utf-8" src="PushNotification.js"></script>
<script type="text/javascript" charset="utf-8" src="CORDOVA_GCM_script.js"></script>
</head>
<body>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<input type="button" value="Register" style="width: 200px; height: 100px;" onclick="register();" >
<input type="button" value="Unregister" style="width: 200px; height: 100px;" onclick="unregister();" >
</body>
</html>
note : that i use cordova-2.1.0.js ! and when i use cordova.js (3.0.0) i get that exec() call to unknown plugin: GCMPlugin
can u help me to resolve this problem .. i spend more than 3 days to resolve it but i still have this problem
Uncaught ReferenceError: Cordova is not defined at file:
Seems you forgot to add cordova js script to your assets folder.
If you want to use GCM, you should do the following:
At first, you should have installed GCM plugin (https://github.com/marknutter/GCM-Cordova).
For cordova 3.0 you just have to add this lines to your res/xml/config.xml file.
<feature name="GCMPlugin">
<param name="android-package" value="com.plugin.GCM.GCMPlugin" />
</feature>
Instead of <plugin name="GCMPlugin" value="com.plugin.GCM.GCMPlugin" />
That's because of <plugin> deprecated in cordova 3.*
I am new to iPhone development and phonegap also. Now i want to create contact in iPhone using phonegap. I got the link to create contact in iPhone with coding. But there one HTML coding with JavaScript. But when i run the coding the simulator and device show's only the HTML tag contents.
I followed this below link only:
"http://docs.phonegap.com/en/2.0.0/cordova_contacts_contacts.md.html#Contacts"
I have attach the coding and Screen Short:
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.note = "This contact has a note.";
navigator.contacts.save(myContact); //HERE
console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Create Contact</p>
</body>
</html>
Screen Short:
Please help me to solve the issue. I have followed all the instruction from that above link. But I didn't get the solution. Thanks in advance.
You need to save your contact.
The documentation states :
contacts.create is a synchronous function that returns a new Contact object.
This method does not persist the Contact object to the device contacts database. To persist the Contact object to the device, invoke the Contact.save method.
function onDeviceReady() {
var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.note = "This contact has a note.";
navigator.contacts.save(myContact); //HERE
console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);
}
var myContact = navigator.contacts.create({"displayName": "Test User"});
Full Example
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
try {
var contact = navigator.contacts.create();
contact.displayName = "Plumber";
contact.nickname = "Plumber"; //specify both to support all devices
// populate some fields
var name = new ContactName();
name.givenName = "Jane";
name.familyName = "Doe";
contact.name = name;
// save to device
contact.save(function(){
alert("Save Success");
},function(){
alert("Error...");
});
} catch(_err) {
alert(_err)
}
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Create Contact</p>
</body>
</html>
OR You can find more option for contact api.
I think you have not read document. i have also edited my answers please check once again.
Description :
contacts.create is a synchronous function that returns a new Contact object.
This method does not persist the Contact object to the device contacts database. To persist the Contact object to the device, invoke the Contact.save method.
http://docs.phonegap.com/en/1.0.0/phonegap_contacts_contacts.md.html#contacts.create