I am trying to call a function in Javascript but its not working.
I didnt find any references on Onsen website and on Google as well.
Can any one tell me what are the Exact steps for calling a function in Javascript?
Do I need to define the function in index.js file or Can I write the function in the same file inside script tags?
I am using Onsen 2.
I had also asked a similar question regarding JQuery but no solution yet.
p1.html
<body onload="onLoad()">
<ons-page>
<ons-button id="demo" onclick="printMsg()">Click Me</ons-button>
</ons-page>
index.js
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.getElementById('demo').addEventListener("click", printMsg,
false);
document.getElementById('btnNext').addEventListener("click",
callNextPage, false);
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
}
function printMsg() {
ons.notification.alert('Hello'):
//alert('hello');
//document.addEventListener("deviceready", onDeviceReady, false);
}
Output Error Msg:
"Uncaught ReferenceError: printMsg is not defined", source: file:///android_asset/www/index.html
Edit :
I have Uploaded my Project at FileDropper
You are combining multiple ways to invoke functions which will probably conflict with each other. Furthermore, you need not go through all the JS you are using to display an alert. This code does that in its simplest form:
<ons-page>
<ons-toolbar>
<div class="center">My app</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button onclick="ons.notification.alert('Hello world!')">Click me!</ons-button>
</p>
</ons-page>
The new and best way to start learning with onsen, is via their new tutorial site: http://tutorial.onsen.io/
An additional note as you asked, all of your JS must be in the index.html file, either directly or linked to a JS file via the script tag.
To demonstrate the above with a function, the following code is provided:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
<title>Onsen UI 2.0 Quickstart</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/css/onsenui.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/js/onsenui.js"></script>
<script src="components/loader.js"></script>
<script>
function sampleAlert(){
ons.notification.alert('Hello world!');
}
</script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="center">My app</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button onclick="sampleAlert()">Click me!</ons-button>
</p>
</ons-page>
</body>
</html>
Just copy that into an onsen project and confirm the loader.js file is in correct folder and it will run.
Hope this helps!
EDIT:
In review of your project, you are not using Onsen correctly. Any page other than index.html does not include html head tags, css, or JS. You have to think of your app as one giant single page website. Relocate everything to the index.html file and this will resolve your problem.
Currently you have (reduced for brevity and protection of your code):
Menus.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/onsenui.css">
<link rel="stylesheet" type="text/css" href="css/onsen-css-components.css">
<link rel="stylesheet" type="text/css" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script type="text/javascript" src="js/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/onsenui.min.js"></script>
<script type="text/javascript" src="js/angular-onsenui.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<ons-page>
<ons-toolbar style="background-color: #6ae2b3">
<div class="center">Menu</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english1.html" ></ons-tab>
<ons-tab page="englishpage.html"></ons-tab>
<ons-tab page="advance.html"></ons-tab>
<ons-tab page="drinkspage.html"></ons-tab>
</ons-tabbar>
<div class="navigation-bar" style="background:#6ae2b3">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;padding:8px;box-sizing:border-box">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(4)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
It needs to just be like this (not complete just a brief example) with all of your functional code moved to the index.html:
<ons-page>
<ons-toolbar style="background-color: #6ae2b3">
<div class="center">Menu</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english1.html" ></ons-tab>
<ons-tab page="englishpage.html"></ons-tab>
<ons-tab page="advance.html"></ons-tab>
<ons-tab page="drinkspage.html"></ons-tab>
</ons-tabbar>
<div class="navigation-bar" style="background:#6ae2b3">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;padding:8px;box-sizing:border-box">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(4)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>