JQuery doesn't work on WebView

Question

I tried to include JQuery files in assets/scripts and on Internet, but the alert dialog doesn't show. I got the log output and make it output.html, it works in Windows (so strange!). What's the problem with WebView?

public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    webView = (WebView) findViewById(R.id.webView);
    final String s = "<html><head>" +
    "<link href=\"css/my.css\" type=\"text/css\" rel=\"stylesheet\" />" +
    "<script src=\"scripts/jquery-1.6.2.min.js\" rel=\"stylesheet\" type=\"text/javascript\"></script>" +
    "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js\" type=\"text/javascript\"></script>" +
    "<script>" +
    "$(document).ready(function(){ alert('hello'); });" +
    "</script>" +
    "</head><body><div>All I hear is raindrops." +
    "Falling on the rooftop. Oh baby tell me why you have to go. " +
    "Cause this pain I feel you won't go away. And today, " +
    "I'm officially missing you.</div></body></html>";
    webView.getSettings().setJavaScriptEnabled(true);
    Log.d("Something", s);
    webView.loadDataWithBaseURL("file:///android_asset/", s, "text/html", "utf-8", null);
}

This is the log output after adding extension ".html". It works on Firefox but does not on WebView. :(

<html>
<head>
<link href="css/my.css" type="text/css" rel="stylesheet" />
<script src="scripts/jquery-1.6.2.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script>$(document).ready(function(){ alert('hello'); });</script>
</head>
<body>
    <div>
    All I hear is raindrops.Falling on the rooftop. Oh baby tell me why you have to go. Cause this pain I feel you won't go away. And today, I'm officially missing you.
    </div>
</body>
</html>

Did you solve it ? I am facing this problem now. What can I do? :( — Kaidul, Sep 24 '13 at 19:54

score 7 · Answer 1 · answered Dec 05 '12 at 04:56

7

webView.loadDataWithBaseURL("file:///android_asset/", s, "text/html", "utf-8", null);

be change to

webView.loadDataWithBaseURL(getAssets(), s, "text/html", "utf-8", null);

to get asset file, you will need to access app's asset path. An app is an user on Android, so cannot access path begin with "file://" directory.

answered Dec 05 '12 at 04:56

wktk

147
2
6

2

Error :), wrong parameter getAssets in loadDataWithBaseUrl(); – Cyph3rCod3r Jun 05 '13 at 06:35

score 2 · Answer 2 · edited May 23 '17 at 12:09

As already mentioned on Android WebView doesn't load jQuery:

Where is your scripts/jquery-1.6.2.min.js script located? If it is located in your assets directory, then you should initialize the webView giving it the assets directory as baseUrl:

webView.loadDataWithBaseURL("file:///android_asset/", data, "text/html", "UTF-8", null);

or

webView.loadUrl("file:///android_asset/file.html");

You could try to create a simple .js file with a simple function like

function dummy(document) { document.write("Hooray it works"); }

and try to access the dummy function in your html to test if the .js file is included.

score 2 · Answer 3 · edited Sep 26 '14 at 07:33

I Guess, some javascript functions like prompt and alert (System popups), should be implemented by your code. A simple guide..,

1. Create a class Jscalls.java

public class Jscalls {

    Context mContext;
    Jscalls(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    public void alert(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }    
}

2. In your program add, webView.addJavascriptInterface(new Jscalls(this), "Android");

3. In html pages, instead of alert("hello"), use Android.alert("hello")

Hope it works :)

yes of course, this works. Though we seem to be facing a problem totally different. — Darpan, Dec 06 '12 at 14:11

score 2 · Answer 4 · answered Jul 19 '11 at 17:46

2

You will need to have the jquery.js file in your assets/scripts folder for this to work.

scripts/jquery-1.6.2.min.js

That should work.

answered Jul 19 '11 at 17:46

Kumar Bibek

9,016
2
39
68

I just check it with the exact same code, and it works. Are you sure you saved it with the proper file name? Or may be if you want to pick it up from the web, try adding the INTERNET permission, that also works. – Kumar Bibek Jul 19 '11 at 17:51
1

@Emerald214 doesn't work for me either, I commented out the CSS line and I have a jquery.min.js file in my root assets folder using Android 3.0 on a 3.1 device – CQM Jul 29 '11 at 18:24

score 2 · Answer 5 · edited Oct 26 '12 at 05:48

2

setPluginsEnabled in WebView settings to true.

edited Oct 26 '12 at 05:48

user

86,916
18
197
190

answered Feb 28 '12 at 06:26

raja

2,393
2
22
25

1

Can you include some sample code? I don't see a "setPluginsEnabled" function anywhere related to WebView – Michael Oct 11 '17 at 20:29

score 1 · Answer 6 · edited Jul 03 '12 at 16:18

1

You should give full path to load javascript and css for example

<link href="http://yourdomain.com/css/my.css" type="text/css" rel="stylesheet" />

edited Jul 03 '12 at 16:18

Matthias

7,432
6
55
88

answered Jul 03 '12 at 14:25

Ajay

21
1

2

That i did already, problem is somewhere else. Thanks for input. – Darpan Dec 06 '12 at 14:10

JQuery doesn't work on WebView

6 Answers6