I am creating first cordova app via visual studio cordova tools.
I am using windows 7 and VS Community (if that is important) and ripple emulator.
Problem is that I have code like this: <button onclick="showAlert(); return false;">Click Me</button> and my function is defined in index.ts.
But I am getting error Exception: showAlert is not defined when click on button.
What am I missing here?
This is compelte code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cordova01</title>
<!-- Cordova01 references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Hello, your application is ready!</p>
<p><strong>Hello, from Cordova :)</strong></p>
<button onclick="showAlert(); return false;">Click Me</button>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
index.ts
module Cordova01 {
"use strict";
export module Application {
export function initialize() {
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener('pause', onPause, false);
document.addEventListener('resume', onResume, false);
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
}
function showAlert() {
navigator.notification.alert(
"This is simple message!", // message
null, // callback
"Alert View Title", // title
'OK' // buttonName
);
}
function onPause() {
// TODO: This application has been suspended. Save application state here.
}
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
}
}
window.onload = function () {
Application.initialize();
}
}
You are almost there, you should change the showAlert function to export function showAlert()
And in the html change it too <button onclick="Cordova01.Application.showAlert(); return false;">Click Me</button>
In your case it couldn't find the showAlert function because it is in a module. Another way is to move the showAlert function out of the module for testing, that should work too!
See fiddle for an example: fiddle