I am currently making a hello world type Phonegap application for android, In which I call a javascript function from the native android code to set the text of one of the paragraphs in my app.
I have a javascript function that I define in my app's html, and I want to call it from my activity once the app loads up. The function just sets the text of a paragraph in my app. I cannot get this to work.
Here is my java activity code:
public class MyPhoneGapActivity extends DroidGap {
public DroidGap c;
public LoadInfo info;
@SuppressLint("SetJavaScriptEnabled")
@JavascriptInterface
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.init();
c = this;
appView.getSettings().setJavaScriptEnabled(true);
appView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
appView.loadUrl("file:///android_asset/www/index.html");
appView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
MyPhoneGapActivity.this.runOnUiThread(new Runnable() {
public void run() {
c.sendJavascript("javascript:getMassTimes()");
}
});
}
});
}
}
and here is my javascript and html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Seed App</title>
<link href="lib/css/ionic.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="lib/css/mycss.css" rel="stylesheet">
<script src="lib/js/ionic.js"></script>
<script src="lib/js/angular/angular.js"></script>
<script src="lib/js/angular/angular-animate.js"></script>
<script src="lib/js/angular/angular-sanitize.js"></script>
<script src="lib/js/angular-ui/angular-ui-router.js"></script>
<script src="lib/js/ionic-angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
</head>
<body ng-app="myApp">
<script type="text/javascript">
function getMassTimes() {
document.getElementById("massTimes").textContent = "This is some text";
}
</script>
<div>
<header-bar title="Saint David the King"
class="bar bar-header bar-energized">
<h1 class="title">Saint David the King</h1>
</header-bar>
<br>
<content scroll="true" has-header="true" width="100%" height="100%"
id="content"> <img alt="Saint David the King"
src="file:///android_asset/www/img/saintdavidthekingbackground2.png"
width="100%" /> <br>
<p id="massTimes">
</p>
</content>
</div>
</body>
</html>
Is there something I am doing wrong? I have seen these sites:
Resolved - Call javascript function from Java
How to call javascript function from java code
https://groups.google.com/forum/?fromgroups=#!topic/android-developers/1o9PgfmyRd8
http://www.jumpbyte.com/2012/phonegap-native-to-javascript/
Javascript calls from Android using PhoneGap
how to call javascript function from android using phonegap plugin
And I have tried what they have on them, but I just can't get this to work.
Any help appreciated!
