title: how to control javascript in android phonegap
body: <p>I am new in phonegap, just start learning it...</p>
  
  <p>I made a demo application from the tutorials given on the phonegap.com, This is my index.html</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;mobiletuts phonegap&lt;/title&gt;
    &lt;script src="cordova-2.7.0.js"&gt;&lt;/script&gt;
    &lt;script&gt;
  
      var pictureSource;  
      var destinationType; 
  
  
     document.addEventListener("deviceready",onDeviceReady,false);
     document.addEventListener("backbutton", function(e){
          if($.mobile.activePage.is('index.html')){
              e.preventDefault();
              navigator.app.exitApp();
          }
          else {
              navigator.app.backHistory()
          }
      }, false);
  
     function onDeviceReady() 
     {
          pictureSource=navigator.camera.PictureSourceType;
          destinationType=navigator.camera.DestinationType;
          navigator.geolocation.getCurrentPosition(onSuccess, onError);
      }
  
      function onPhotoDataSuccess(imageData) 
      {
        var smallImage = document.getElementById('smallImage');
        smallImage.style.display = 'block';
        smallImage.src = "data:image/jpeg;base64," + imageData;
      }
  
      function onPhotoURISuccess(imageURI) 
      {
         var largeImage = document.getElementById('largeImage');
         largeImage.style.display = 'block';
         largeImage.src = imageURI;
      }
  
      function capturePhoto() 
      {
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
          destinationType: destinationType.DATA_URL });
      }
  
      function capturePhotoEdit() 
      {
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
          destinationType: destinationType.DATA_URL });
      }
  
      function getPhoto(source) 
      {
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
          destinationType: destinationType.FILE_URI,
          sourceType: source });
      }
  
      function onFail(message) 
      {
        alert('Failed because: ' + message);
      }
  
      function onSuccess(position) 
      {
          var element = document.getElementById('geolocation');
          element.innerHTML = 'Latitude: '           + position.coords.latitude              + '&lt;br /&gt;' +
                              'Longitude: '          + position.coords.longitude             + '&lt;br /&gt;' +
                              'Altitude: '           + position.coords.altitude              + '&lt;br /&gt;' +
                              'Accuracy: '           + position.coords.accuracy              + '&lt;br /&gt;' +
                              'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '&lt;br /&gt;' +
                              'Heading: '            + position.coords.heading               + '&lt;br /&gt;' +
                              'Speed: '              + position.coords.speed                 + '&lt;br /&gt;' +
                              'Timestamp: '          +                                   position.timestamp          + '&lt;br /&gt;';
      }
  
      function onError(error) 
      {
          alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
      }
  
      function onLoad(){
            document.addEventListener("deviceready", onDeviceReady, false);
        }
  
       function changeBG(){
  
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                  destinationType: destinationType.DATA_URL });
            document.bgColor = '#aaa';
  
       }
  
       function Alert()
       {
          alert('Ther alert dialog from the javascript method');
       }
       function onAlert()
       {
          AndroidFunction.showAlert();
       }
  
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
          &lt;button onClick="capturePhoto();"&gt;Capture Photo&lt;/button&gt; &lt;br&gt;
          &lt;button onClick="capturePhotoEdit();"&gt;Capture Editable Photo&lt;/button&gt; &lt;br&gt;
          &lt;button onClick="getPhoto(pictureSource.PHOTOLIBRARY);"&gt;From Photo Library&lt;/button&gt;&lt;br&gt;
          &lt;button onClick="getPhoto(pictureSource.SAVEDPHOTOALBUM);"&gt;From Photo Album&lt;/button&gt;&lt;br&gt;
          &lt;button onClick="Alert();"&gt;Show Alert msg from javascript&lt;/button&gt;&lt;br&gt;
          &lt;button onClick="onAlert();"&gt;Show Alert msg from java&lt;/button&gt;&lt;br&gt;
          &lt;p id="geolocation"&gt;Finding geolocation...&lt;/p&gt;
          &lt;img style="display:none;width:60px;height:60px;" id="smallImage" src="" /&gt;
          &lt;img style="display:none;" id="largeImage" src="" /&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works properly, but now i want to control some functions from the java, so i made a webview in layout file, and make sone changes in java file, here is my java code...</p>
  
  <pre><code>public class MainActivity extends Activity {
  
  WebView webView;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
  
      webView = (WebView) findViewById(R.id.webView);
      JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(
              this);
  
      webView.getSettings().setJavaScriptEnabled(true);
      webView.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
      webView.loadUrl("file:///android_asset/www/index.html");
  
      webView.setWebViewClient(new MyWebViewClient());
  
  }
  
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
  }
  
  @Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
      // TODO Auto-generated method stub
      if (resultCode != RESULT_CANCELED) {
  
          if (requestCode == 33) {
              /*
               * Bitmap photo = (Bitmap) data.getExtras().get("data");
               * imageView.setImageBitmap(photo);
               */
          }
      }
  }
  
  public class JavaScriptInterface {
      Context mContext;
  
      JavaScriptInterface(Context c) {
          mContext = c;
      }
  
      @JavascriptInterface
      public void showToast(String toast) {
          Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
      }
  
      @JavascriptInterface
      public void showAlert() {
          webView.loadUrl("javascript:Alert()");
      }
  
      @JavascriptInterface
      public void startNewActivity() {
  
          Intent intent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
          startActivity(intent);
      }
  
  }
  
  class MyWebViewClient extends WebViewClient {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          if (Uri.parse(url).getHost()
                  .equals("file:///android_asset/www/index.html")) {
              // This is my web site, so do not override; let my WebView load
              // the page
              return false;
          }
          // Otherwise, the link is not for a page on my site, so launch
          // another Activity that handles URLs
          Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
          startActivity(intent);
          return true;
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Now i want to call java methods from the javascript, so that i have add a button and two script methods in index.html, they are...</p>
  
  <pre><code>function Alert()
   {
      alert('Ther alert dialog from the javascript method');
   }
   function onAlert()
   {
      AndroidFunction.showAlert();
   }
  </code></pre>
  
  <p>add a button to call onAlert() function, But when i run it on device, no button will work...
  I cant understand what is the issue, can anyone help me....</p>