CODEWITHSUNDEEP
androidjquerydomwebviewupdating
NATOR
NATOR

Reputation: 525

How to force Android Webview to repaint on DOM changes?

I'm currently working on a web portal that needs to be run within an Android Webview as part of a native application. This whole portal is heavily AJAX-based. So whenever a form is submitted, this is done asynchronously. Depending on the response, I need to present a message box saying "Success" or "Error". I'm doing this with jQuery at the moment. The problem is, that the Android Webview won't repaint and thus the message box won't be visible. What helps, is to tap anywhere on the screen. This seems to force the repainting. No what I need to do is:

1) Do the DOM changes in another way so the Android Webview handles it properly.

OR

2) Force a repainting by triggering some (pseudo) events or by using some dirty hack :)

Anyone ever experienced this problem? Any hints are heavily appreciated.

Upvotes: 5

Views: 4235

Answers (4)

user846969
user846969

Reputation:

Here is how I forced webview to update each time, please see the code at: // WEBVIEW

package com.example.scroll;
// philip r brenan at gmail.com, www.appaapps.com 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MainActivity extends Activity
 {protected void onCreate(Bundle savedInstanceState)
   {super.onCreate(savedInstanceState);
    setContentView(new MyWebView(this)); 
   }
  class MyWebView extends WebView 
   {MyWebView(Context Context)
     {super(Context);
      getSettings().setJavaScriptEnabled(true);
      addJavascriptInterface(this, "Android");   
      new Thread()
       {public void run()
         {for(int j = 0; j < 100; ++j)
           {post(new Runnable()
             {public void run()
               {loadData(content(), "text/html", "utf-8"); // Display in browser
               }
             });    
            try {Thread.sleep(5000);} catch(Exception e) {}
           }  
         }
       }.start();
     } 
    int c = 0, C = 1;
    String content() 
     {final StringBuilder s = new StringBuilder();
      //s.append("<html id="+(C++)+"><body>"); // WEBVIEW REFRESHES CORRECTLY *************** 
      s.append("<html><body>");              // WEBVIEW DOES NOT REFRESH ******************

      s.append("<h1 id=11>1111</h1>");
      s.append("<script>location.href = '#22';</script>");
      for(int i = 0; i < 10; ++i) s.append("<p>"+c+c+c); ++c;

      s.append("<h1 id=22>2222</h1>");
      for(int i = 0; i < 10; ++i) s.append("<p>"+c+c+c); ++c;
      Log.e("AAAAAA", "content="+s.toString());
      s.append("</body></html>");
      return s.toString();
     }
   } 
 }

Upvotes: 1

Nick Louloudakis
Nick Louloudakis

Reputation: 6005

Just a different thought to have the result you want:

As far as this works via jQuery, have you tried to enable the JavaScript on your WebView? In this way, you should be able to have executed JavaScript code in your WebView (and probably, the changes from jQuery will be visible).

myWebView.getSettings().setJavaScriptEnabled(true);

Upvotes: 1

kassim
kassim

Reputation: 4009

I've never had an issue with it displaying DOM updates from non-Async calls, so perhaps a solution would be to have your asynchronous methods call back to an injected object (WebView.addJavascriptInterface()) - then have that run a call on the UI thread to the Webview to update the UI?

Upvotes: 1

Kiran Kumar
Kiran Kumar

Reputation: 1212

Watch this video and read this answer. The trick is to use 

    -webkit-transform: translate3d(0,0,0);

css style on the div which needs to be updated. This creates a new layer and animations/updates become smoother.

Upvotes: 4

Related Questions