CODEWITHSUNDEEP
androidjqueryandroid-webviewandroid-2.2-froyo
emeraldhieu
emeraldhieu

Reputation: 9439

JQuery doesn't work on WebView

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>

Upvotes: 17

Views: 20614

Answers (6)

everlasto
everlasto

Reputation: 4930

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 :)

Upvotes: 2

wktk
wktk

Reputation: 147

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.

Upvotes: 7

raja
raja

Reputation: 2413

setPluginsEnabled in WebView settings to true.

Upvotes: 2

Wojciech G&#243;rski
Wojciech G&#243;rski

Reputation: 943

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.

Upvotes: 2

Ajay
Ajay

Reputation: 21

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" />

Upvotes: 1

Kumar Bibek
Kumar Bibek

Reputation: 9117

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.

Upvotes: 2

Related Questions