Unable to call @JavaScriptInterface method in Android

Question

I am trying to transfer event data from my webview to my Android application. Unfortuately, for some reason the Javascript interface method never get called. Part of my HTML is a response of an AJAX call. I am just going to display the HTML pointing out with comments where information is from the server. Here is my HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="styling.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
lastRecord=0;

    function loadEvents(){

        $('#sample').html( 'hello' );
        $.get(
        "eventquery.php?lastRecord="+lastRecord,
        function( data ) {
            $('#todayCollapsible').append( data )
            .trigger( 'create' )    
            .listview( 'refresh' );
            }); 
    }
</script>
</head>
<body style="background-color : #e9e9e9;" onload="loadEvents()">

<div data-iconpos="none" data-role="collapsibleset" data-theme="a" data-content-theme="a">

<div data-role="collapsible" data-collapsed="false">
    <h2><img src="today_calendar.png" style="height: 60px; vertical-align:middle;"> Today's Events</h2>
    <div id="todayCollapsible">
    <!-- Load from php using ajax call -->
    <div id="'.$row['Event ID'].'" class="event-wrapper" data-role="collapsible" data-collapsed="true">
    <h5 class="title" onclick="addEvent()">'.$row['Title'].'</h5>
    <ul data-role="listview" id="today_events">
    <li class="event"><a href="#">
    <table><tr><td>Date</td>
    <td class="date" style="padding: 10px;">.$row['Date'].</td>'
    </tr><tr>
    <td> Time </td>
    <td class="time" style="padding: 10px;">.$row['Time_Duration'].</td>
    </tr><tr>
    <td> Venue </td>
    <td class="venue" style="padding: 10px;">.$row['Venue'].</td>
    </tr></table></a></li>
    <li style="background-color: #CADECC;">
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
    </li></ul>
    </div>
    <!-- php data finished -->
    </div>
    </div>
</div>
<script>
var title;
var date;
var time;
var venue;

    $("body").on('click','button',function(){
        title = $(this).closest(".event-wrapper").find(".title").text();
        date =  $(this).closest(".event-wrapper").find("table .date").text();
        time =  $(this).closest(".event-wrapper").find("table .time").text();
        venue = $(this).closest(".event-wrapper").find("table .venue").text();

    alert(title+date+time+venue);
    console.log("executing function");
    Android.addCalendarEvent(title,date,time,venue);
    console.log("function executed");
    });
</script>
</body>
</html>

EventActivity.java

private WebView myWebView;
private String webaddress = "http://.....";

protected void onCreate(Bundle savedInstance){
...
myWebView.getSettings().setJavaScriptEnabled(true);

myWebView.addJavascriptInterface(this,"Android");

myWebView.loadUrl(webaddress);
}

@JavascriptInterface
public void addCalendarEvent(String title, String date, String time, String venue){

//Toast.makeText(this,title+date+time+venue,Toast.LENGTH_LONG).show();
Log.d("Data from JS", title+date+time+venue);

}

Please replace the `Toast` with `Log.d()` or something. There is no guarantee that you can show a `Toast` from the thread that you are called on. — CommonsWare, Jul 19 '14 at 22:44
How about the `console.log()` messages that you are logging from JavaScript? Do you see those? — CommonsWare, Jul 19 '14 at 22:50
That would suggest that your problem isn't with the `addJavascriptInterface()` stuff, but that the button itself is not working. — CommonsWare, Jul 19 '14 at 22:56
Here is my page: http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.html. I have only shown Today's Events here — stud91, Jul 19 '14 at 23:00
Add a `WebChromeClient` and override `onConsoleMessage()` and `onJsAlert()` to have `console.log()` and `alert()` trigger your Java code. `console.log()` should be automatically going to LogCat, IIRC. — CommonsWare, Jul 19 '14 at 23:00

score 0 · Answer 1 · edited May 23 '17 at 10:26

JavaInterface Methods don't run on UI thread.

Try wrapping up your innermethod like this

@JavascriptInterface
public void addCalendarEvent(String title, String date, String time, String venue){
           mActivity.runOnUiThread(new Runnable() {

                @Override
                public void run() {
                    Log.d("Data from JS", title+date+time+venue);
                }

            });
}

Also check this question

Unable to call @JavaScriptInterface method in Android

1 Answers1