Android : unable to change the image by calling js function in webview

Question

I used WebView and loaded the html from the asset folder webview.loadUrl(PAGE_URL);. I have the javascript function to change the image from the WebViewClient shouldOverrideUrlLoading method.

   webview.setWebViewClient(new WebViewClient(){

                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    // eg. url is 'status:0'.
                    System.out.println("This is url:" + url);

                        if(status == 0 || status == 1) {
                            articlejs.setReadStatus(status);
                            String webUrl = "javascript:doStatusSwitch('"+status+"')";
                            articleWebview.loadUrl(webUrl);
                        }
                   }
   }

In the javascirpt function,

function writeReadStatus() {
    var png=new Array("status_read.png","status_unread.png");

    var val= '';
    var index = articlejs.getReadStatus();
    val += '<a href="status:'+ index +'" >';
    val += '<img src="images/'+ png[index] +'" width="10" height="10" />';
    val += '</a>'; 
    document.write(val);
}

    function doStatusSwitch(n) {
        alert('hi hi'+n);
        // Read Status [YES:0,NO:1]
        var png=new Array("status_read.png","status_unread.png");
        var obj=document.getElementById("read").getElementsByTagName("img");
        if(obj){obj[0].src="images/"+png[n];}
        var aObj=document.getElementById("read").getElementsByTagName("a");
        if(aObj){aObj[0].href="status:"+n;}
    }

In the html file,

   <div id="head">
        <h1><script type="text/javascript">writeTitleText(); writeStyle();</script></h1>
        <ul id="status">
            <li id="read"><script type="text/javascript">writeReadStatus();</script></a></li>
        </ul>
    </div>

When I click the image, the js function have to change the image. My problem is that when I click one time, it didn't change and I have to click two time to change the image. I don't know why is it happened?

When I click the image, the logcat show

11-25 11:20:46.461: V/WebViewInputDispatcher(737): blockWebkitDraw
11-25 11:20:46.461: V/WebViewInputDispatcher(737): blockWebkitDraw lockedfalse
11-25 11:20:46.766: D/webview(737): blockWebkitViewMessage= false
11-25 11:20:46.781: I/System.out(737): This is url:status:0
11-25 11:20:46.781: D/WebView(737): loadUrlImpl: called
11-25 11:20:46.791: D/WebCore(737): uiOverrideUrlLoading: shouldOverrideUrlLoading() returnstrue
11-25 11:20:46.791: D/webcore(737):  CORE loadUrl: called
11-25 11:20:46.791: D/webkit(737): Firewall not null
11-25 11:20:46.791: D/webkit(737): euler: isUrlBlocked = false
11-25 11:20:46.896: E/IMGSRV(737): :0: GetPTLAFormat: Invalid format
11-25 11:21:16.686: E/IMGSRV(737): :0: GetPTLAFormat: Invalid format

EDIT: I found that link. I did as they suggested but no luck.

Thanks

Answer 1

I found one solution. I dispatch the touch event in the shouldOverrideUrlLoading method like this.

                if(status == 0 || status == 1) {
                   articlejs.setReadStatus(status);
                   String webUrl = "javascript:doStatusSwitch('"+status+"')";
                   articleWebview.loadUrl(webUrl);

                   articleWebview.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 1, 0, 0));
                   articleWebview.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 1, 0, 0));
                }