How can i change the html page data from android in the run time?

Question

I am very new to android. Now i am working android html and java script functionality. I have tried to send the data from android page to html page but i didn't succeed. Please tell me how can i do that in android. That a great help for me.

Html page:

<!doctype html>
        <html lang="en">
         <head>
          <meta charset="UTF-8">
          <meta name="Generator" content="EditPlusÂ®">
          <meta name="Author" content="">
          <meta name="Keywords" content="">
          <meta name="Description" content="">
          <title>Document</title>
    <script src="index.js"></script>

         </head>
         <body>

          <h1>This is my first webpage</h1>

          <p id="demo">A Paragraph.</p>

        <button type="button" onclick="myFunction()">Try it</button>


         </body>
        </html>

Java script page index.js

 function myFunction() 
 {
document.getElementById("demo").innerHTML = "Paragraph changed.";
 }

In the android assets folder i put these files. In the layout i have taken one edit text and one button. For that edit text i got text and i want to update that text to html page. That is task. so i did like

Layout file:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="100"
        android:orientation="horizontal" >

        <EditText 
            android:id="@+id/edittext"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="70"/>
        <Button 
            android:layout_width="0dp"
            android:layout_weight="30"
            android:id="@+id/button"
            android:layout_height="40dp"
            android:text="Button"/>

    </LinearLayout>

    <WebView
        android:id="@+id/graph"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </LinearLayout>

Activity:

package com.roopasoft.drawtriangle;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class HtmlLoad extends Activity implements OnClickListener{

EditText editText;
Button button;
WebView view;
@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview);
    view = (WebView)findViewById(R.id.graph);
    editText = (EditText)findViewById(R.id.edittext);
    button = (Button)findViewById(R.id.button);

    view.getSettings().setJavaScriptEnabled(true);
    view.loadUrl("file:///android_asset/TextDemo.html");

    button.setOnClickListener(this);

}


@Override
public void onClick(View v) {
    switch (v.getId()) {
    case R.id.button:

        String name = editText.getText().toString();

        view.loadUrl("file:///android_asset/javascript:myFunction(\""+name+"\")");

        break;
    }

}

}

When i click my button that name will not updated to edit text. Can you please tell me how can slove that problem.

Thanks Shankar

score 0 · Answer 1 · edited May 23 '17 at 12:11

Long back I loaded html on webview and was polling data from javascript from android. something like this.

WebView wbview = (WebView) this.findViewById(R.id.report_wv_chartview);
WebSettings webSettings = wbview.getSettings();
webSettings.setJavaScriptEnabled(true);
wbview.addJavascriptInterface(this, "webConnector");
wbview.addJavascriptInterface(this, "toaster");
webSettings.setBuiltInZoomControls(true);
wbview.requestFocusFromTouch();
wbview.setWebViewClient(new WebViewClient());
wbview.setWebChromeClient(new WebChromeClient());

wbview.loadUrl("file:///android_asset/html/bar.html");


public String get_bar_json()
{
    return jString;
}

then in the html code:

// i used jquery
<script id="source" language="javascript" type="text/javascript">
    $(function()
    {
    var jsonData = new Object();
    var jsonData = window.webConnector.get_bar_json();
    .
    .
    .
    });
</script>

Additionally, this might help.

score 0 · Accepted Answer · answered Jun 30 '14 at 07:53

0

Change

view.loadUrl("file:///android_asset/javascript:myFunction(\""+name+"\")");

to

view.loadUrl("javascript:myFunction(\""+name+"\")");

answered Jun 30 '14 at 07:53

greenapps

10,799
2
13
19

Hi, When i click the button the my function is calling. But if you mind how can i change that text in the html page. I have to send my own text. So what can i write in the js file. – Nava2011 Jun 30 '14 at 08:02
It is unclear to me if the change i suggested did help you. `my function is calling`: if you ment that your function is called now then how do you know? The javascript function `myFunction()` does not take parameters but you call it with a parameter. How should that work? Change it to have a message parameter and put the message as innerHTML. – greenapps Jun 30 '14 at 08:09

How can i change the html page data from android in the run time?

2 Answers2