WebView can't access my jquery scripts in assets

Question

I'm testing the jquery.mobile script and was able to run a HTML5 content using WebView.

It seems that it can't find my jquery files but i've placed them accordingly inside the following path:

Project > assets > www > jquery

where my html file is located:

Project > assets > www > index.html

my html looks like this:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="file:///android_asset/www/jquery/jquery.mobile-1.0.min.css" />
<script src="file:///android_asset/www/jquery/jquery-1.6.4.min.js"></script>
<script src="file:///android_asset/www/jquery/jquery.mobile-1.0.min.js"></script>

<style type="text/css">
#floatMe
{
    float: right;
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $('#btnHello').click(function() {
            var name = $('#txtName').val();
            alert(name);
        });
    });
</script>
</head>
<body>
<div id="floatMe">
What's your name?
<input id="txtName" value="" />
<button id="btnHello">say hello</button>
</div>
</body>
</html>

The error keeps prompting me:

ReferenceError: Can't find variable: jQuery at file:///android_asset/www/index.html ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html

Paste the page loading code. Do you load by URL or by feeding the HTML to the WebView as a string? — Seva Alekseyev
webView.getSettings().setJavaScriptEnabled(true); webView.setWebChromeClient(new WebChromeClient()); webView.getSettings().setDomStorageEnabled(true); webView.loadUrl("file:///android_asset/www/index.html"); — Martin Ongtangco

Dave Ward Dave Ward · Accepted Answer · 2012-01-15T04:08:45

Have you tried using a path relative to your HTML page?

<script src="jquery/jquery-1.6.4.min.js"></script>

That's how you reference scripts from a page within a PhoneGap project, which should be similar since it's running in a WebView too.

WebView can't access my jquery scripts in assets

1 Answers