JavaScript not working with android WebView, Uncaught ReferenceError

Question

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.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="pagination/jquery.simplePagination.js"></script>
    <script src="http://code.jquery.com/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>

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
– Randy, Commented Oct 3, 2013 at 4:14

Jeevan · Accepted Answer · 2013-10-18 09:10:09Z

4

Basically 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()

answered Oct 18, 2013 at 9:10

Jeevan

8,81214 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript not working with android WebView, Uncaught ReferenceError

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related