I am trying to load a web app on android using WebView and the JavaScript in my html files is not executing properly.
I create the WebView and load the home page like this:
web = new WebView(this);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setDomStorageEnabled(true);
JavaScriptInterface jsInterface = new JavaScriptInterface(web, this);
web.setWebChromeClient(new WebChromeClient());
web.addJavascriptInterface(jsInterface, "JSInterface");
web.loadUrl("file:///android_asset/web/home.html");
Once the home page is loaded I click a link to another local page, register.html, where I have a JavaScript function in the head
<script type="text/javascript">
function doRegister() {
var user = document.getElementById("username").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var confPass = document.getElementById("confirmPassword").value;
var message = "";
if (user.length < 6 || user.length > 16) {
message = message + "Username must be between 6 and 16 characters.<br>";
}
if (pass.length < 8 || pass.length > 16) {
message = message + "Password must be between 8 and 16 characters.<br>";
}
if (pass !== confPass) {
message = message + "Password and confirm password do not match.<br>";
}
if (email.indexOf("@") === -1) {
message = message + "Email address is invalid.<br>";
}
if (message === "") {
message = JSInterface.register(user, email, pass);
if (message === "") {
window.location.href = "home.html";
}
}
document.getElementById("message").style.color="red";
document.getElementById("message").innerHTML=message;
}
</script>
This function is called by a buttons onclick like so
<input id="register" type="button" value="Submit" data-role="button" data-inline="true" data-theme="b" onclick="doRegister()" />
It appears that when the button is clicked it is trying to call doRegister() on home.html. When I click the button i get Uncaught ReferenceError: doRegister is not defined at file:///android_asset/web/home.html:1
To confirm this, I added a JavaScript function to home.html that just displays an alert and this did indeed execute when I clicked the button in register.html
Any help on this problem would be greatly appreciated. Thanks.
Update: Forgot to mention, the JavaScript executes fine in the eclipse web browser as well as firefox. Here is my home.html
<!doctype html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".2.0/jquery.mobile-1.2.0.min.css">
<script src=".8.2.min.js"></script>
<script type="text/javascript" src="pagination/jquery.simplePagination.js"></script>
<script src=".2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript>
function doSubmit() {
alert("test");
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<ul data-role=listview>
<li> <a href = professors.html> Browse Professors </a> </li>
<li> <a> Search Professors </a> </li>
<li> <a> Browse Course </a> </li>
<li> <a> Search Course </a> </li>
<li> <a href = login.html> Login </a> </li>
<li> <a href = register.html> Register </a> </li>
</ul>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
I am trying to load a web app on android using WebView and the JavaScript in my html files is not executing properly.
I create the WebView and load the home page like this:
web = new WebView(this);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setDomStorageEnabled(true);
JavaScriptInterface jsInterface = new JavaScriptInterface(web, this);
web.setWebChromeClient(new WebChromeClient());
web.addJavascriptInterface(jsInterface, "JSInterface");
web.loadUrl("file:///android_asset/web/home.html");
Once the home page is loaded I click a link to another local page, register.html, where I have a JavaScript function in the head
<script type="text/javascript">
function doRegister() {
var user = document.getElementById("username").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var confPass = document.getElementById("confirmPassword").value;
var message = "";
if (user.length < 6 || user.length > 16) {
message = message + "Username must be between 6 and 16 characters.<br>";
}
if (pass.length < 8 || pass.length > 16) {
message = message + "Password must be between 8 and 16 characters.<br>";
}
if (pass !== confPass) {
message = message + "Password and confirm password do not match.<br>";
}
if (email.indexOf("@") === -1) {
message = message + "Email address is invalid.<br>";
}
if (message === "") {
message = JSInterface.register(user, email, pass);
if (message === "") {
window.location.href = "home.html";
}
}
document.getElementById("message").style.color="red";
document.getElementById("message").innerHTML=message;
}
</script>
This function is called by a buttons onclick like so
<input id="register" type="button" value="Submit" data-role="button" data-inline="true" data-theme="b" onclick="doRegister()" />
It appears that when the button is clicked it is trying to call doRegister() on home.html. When I click the button i get Uncaught ReferenceError: doRegister is not defined at file:///android_asset/web/home.html:1
To confirm this, I added a JavaScript function to home.html that just displays an alert and this did indeed execute when I clicked the button in register.html
Any help on this problem would be greatly appreciated. Thanks.
Update: Forgot to mention, the JavaScript executes fine in the eclipse web browser as well as firefox. Here is my home.html
<!doctype html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery./mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery./jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="pagination/jquery.simplePagination.js"></script>
<script src="http://code.jquery./mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript>
function doSubmit() {
alert("test");
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<ul data-role=listview>
<li> <a href = professors.html> Browse Professors </a> </li>
<li> <a> Search Professors </a> </li>
<li> <a> Browse Course </a> </li>
<li> <a> Search Course </a> </li>
<li> <a href = login.html> Login </a> </li>
<li> <a href = register.html> Register </a> </li>
</ul>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
- 1 Show your home.html page with script – Vicky Gonsalves Commented Oct 3, 2013 at 4:12
- 1 Sounds like bad syntax is causing the parser to not find doRegister. Have you tried your page in google chrome (pc) to check for syntax errors? – Randy Commented Oct 3, 2013 at 4:14
1 Answer
Reset to default 4Basically webview is not able to find the function doRegister() , sine that is in a different html page register.html, which is not loaded. Try this
1. Move the js portion in register.html to some .js file say func.js
2. Then refer to func.js from your home.html as
<script type="text/javascript" src="func.js"></script>
3. once page is loaded, clicking on the button should call doRegister()