Ajax not working in webview android (Uncaught TypeError: undefined is not a function)
<p>I am trying to call ajax from android webview and it's not working. I am getting this error in console window</p>
<pre><code>08-29 12:28:16.411: E/CONTENT(14146): [object Object] @ 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:16.536: E/CONTENT(14146): Uncaught TypeError: undefined is not a function @ 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:16.683: E/CONTENT(14146): Uncaught TypeError: undefined is not a function @ 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:16.883: E/CONTENT(14146): Uncaught TypeError: undefined is not a function @ 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
08-29 12:28:17.202: E/CONTENT(14146): Uncaught TypeError: undefined is not a function @ 1: http://loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js
</code></pre>
<p>I am using this android code</p>
<pre><code>webview = (WebView) findViewById(R.id.webview);
        webview.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url)
            {
                return super.shouldOverrideUrlLoading(view, url);
            }
            
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                dialog.show();
            }
            
            @Override
            public void onPageFinished(WebView view, String url) {
                if(url.equals(&quot;http://xyz&quot;)){
                    editor.putString(&quot;login&quot;, &quot;true&quot;);
                    editor.commit();
                    trytologin = false;
                }else if(url.equals(&quot;http://xyz&quot;)){
                    editor.clear();
                    editor.commit();
                    Intent intent = new Intent(WebActivity.this,MainActivity.class);
                    if(trytologin == true){
                        intent.putExtra(&quot;login&quot;, &quot;failed&quot;);
                    }
                    startActivity(intent);
                    finish();
                }
                if(!isNetworkAvailable()){
                    alertDialog();
                    linearLayout.setVisibility(View.VISIBLE);
                    webview.setVisibility(View.GONE);
                }else{
                    webview.setVisibility(View.VISIBLE);
                    imageView.setVisibility(View.VISIBLE);
                }
                dialog.dismiss();
                //pd.dismiss();
                //Toast.makeText(WebActivity.this, url, Toast.LENGTH_LONG).show();
            }
        });
        webview.setWebChromeClient(new WebChromeClient(){
             @Override
                public boolean onConsoleMessage(ConsoleMessage cm)
                {
                    Log.e(&quot;CONTENT&quot;, String.format(&quot;%s @ %d: %s&quot;, 
                                cm.message(), cm.lineNumber(), cm.sourceId()));
                    return true;
                }
        });
        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setAppCacheEnabled(true);
        webview.getSettings().setDatabaseEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
        webview.getSettings().setSupportZoom(true);
        webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webview.getSettings().setAllowFileAccessFromFileURLs(true);
        webview.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webview.getSettings().setLoadsImagesAutomatically(true);
        webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webview.getSettings().setLoadWithOverviewMode(true);
        webview.getSettings().setAllowContentAccess(true);
        webview.getSettings().setUseWideViewPort(true);
</code></pre>
<p>I am trying to call this ajax file</p>
<pre><code>function GoogleFetchAndFillHistoryLocation(t,e,n,o){$.ajax({url:&quot;http://maps.googleapis.com/maps/api/geocode/json?latlng=&quot;+t+&quot;,&quot;+e,success:function(t){var e=[],c=&quot;&quot;,r=&quot;&quot;;t.results[0].address_components.forEach(function(t,n,o){&quot;Unnamed Road&quot;!=t.long_name&amp;&amp;e.push(t.long_name),t.types.includes(&quot;sublocality&quot;)&amp;&amp;(c=t.long_name),t.types.includes(&quot;locality&quot;)&amp;&amp;(r=t.long_name)}),console.log(t.results[0].formatted_address);var i=e.join(&quot;, &quot;),a=c+&quot;, &quot;+r;o.html(i),n.html(a)},error:function(t){o.html(&quot;Some error occurred while fetching address&quot;)}})}function HistorySelector(t){this.$selector=t}!function(t){&quot;use strict&quot;;var e=function(t,n){var o=/[^\w\-\.:]/.test(t)?new Function(e.arg+&quot;,tmpl&quot;,&quot;var _e=tmpl.encode&quot;+e.helper+&quot;,_s='&quot;+t.replace(e.regexp,e.func)+&quot;';return _s;&quot;):e.cache[t]=e.cache[t]||e(e.load(t));return n?o(n,e):function(t){return o(t,e)}};e.cache={},e.load=function(t){return document.getElementById(t).innerHTML},e.regexp=/([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g,e.func=function(t,e,n,o,c,r){return e?{&quot;\n&quot;:&quot;\\n&quot;,&quot;\r&quot;:&quot;\\r&quot;,&quot;    &quot;:&quot;\\t&quot;,&quot; &quot;:&quot; &quot;}[e]||&quot;\\&quot;+e:n?&quot;=&quot;===n?&quot;'+_e(&quot;+o+&quot;)+'&quot;:&quot;'+(&quot;+o+&quot;==null?'':&quot;+o+&quot;)+'&quot;:c?&quot;';&quot;:r?&quot;_s+='&quot;:void 0},e.encReg=/[&lt;&gt;&amp;&quot;'\x00]/g,e.encMap={&quot;&lt;&quot;:&quot;&amp;lt;&quot;,&quot;&gt;&quot;:&quot;&amp;gt;&quot;,&quot;&amp;&quot;:&quot;&amp;amp;&quot;,'&quot;':&quot;&amp;quot;&quot;,&quot;'&quot;:&quot;&amp;#39;&quot;},e.encode=function(t){return(null==t?&quot;&quot;:&quot;&quot;+t).replace(e.encReg,function(t){return e.encMap[t]||&quot;&quot;})},e.arg=&quot;o&quot;,e.helper=&quot;,print=function(s,e){_s+=e?(s==null?'':s):_e(s);},include=function(s,d){_s+=tmpl(s,d);}&quot;,&quot;function&quot;==typeof define&amp;&amp;define.amd?define(function(){return e}):t.tmpl=e}(this),HistorySelector.prototype.bindEvents=function(){var t=this;this.$selector.on(&quot;change&quot;,function(){t.fetchData()})},HistorySelector.prototype.fetchData=function(){$.ajax({context:this,url:this.$selector.data(&quot;url&quot;),data:{profiles:{interval:this.$selector.val()}},headers:{&quot;X-Auth-Token&quot;:$(&quot;#auth-token&quot;).data(&quot;token&quot;)},success:function(t){console.log(t),this.populateData(t),$(&quot;.location-panel&quot;).each(function(t,e){var n=$(e);setTimeout(function(){GoogleFetchAndFillHistoryLocation(n.data(&quot;lat&quot;),n.data(&quot;long&quot;),n.find(&quot;.short-location&quot;),n.find(&quot;.formatted-address&quot;))},200*t)})},error:function(t){console.log(t)}})},HistorySelector.prototype.populateData=function(t){var e=$(tmpl(&quot;history-locations&quot;,t).trim());$(&quot;.history-locations&quot;).empty().append(e),$(&quot;body&quot;).scrollTop()&lt;180&amp;&amp;$(&quot;html, body&quot;).animate({scrollTop:&quot;180vh&quot;},&quot;slow&quot;)},HistorySelector.prototype.init=function(){},$(function(){$(&quot;.selectors input&quot;).each(function(){var t=new HistorySelector($(this));t.init(),t.bindEvents()})});
</code></pre>
<p>you can see the ajax file on this link as well - <a href="http://www.loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js" rel="nofollow noreferrer">http://www.loconav.com/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js</a></p>
<p>I am using this html code</p>
<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge,chrome=1&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Babatrucks&lt;/title&gt;
    &lt;meta content=&quot;authenticity_token&quot; name=&quot;csrf-param&quot; /&gt;
&lt;meta content=&quot;lNJn5/GLbnS0cgUYjalFUT+UsgCcDckhWHcqI32OeJ0=&quot; name=&quot;csrf-token&quot; /&gt;

    &lt;link href=&quot;/assets/application-33b3164661d3b2d630f9cbc88419feb4.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;link href=&quot;/assets/m_application-9613cb73f45d486ef514a74fa1964a46.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;script src=&quot;/assets/application-95d8b0297f927b393dd0e1aaf163bc4d.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-xs-12&quot;&gt;
          &lt;link href=&quot;/assets/m/trucks/show-bcd1a590d01e03df2a78b4c5dbd1a975.css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script src=&quot;/assets/m/history_selector-1b620f001e31e9dfeff6981b3ee9b290.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;row top-bar&quot;&gt;
  &lt;div class=&quot;col-xs-2 text-center&quot;&gt;
    &lt;a class=&quot;back-arrow&quot; href=&quot;/m/trucks&quot;&gt;
      &lt;i class=&quot;fa fa-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
&lt;/a&gt;  &lt;/div&gt;
  &lt;div class=&quot;col-xs-8 text-center title&quot;&gt;
    NL 01L 2273
  &lt;/div&gt;
  &lt;div class=&quot;col-xs-2 text-right&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
  &lt;iframe class='locate-map' src=&quot;/m/trucks/296/locate&quot;&gt;&lt;/iframe&gt;
  &lt;div class=&quot;col-xs-12&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;selectors rohan-container&quot;&gt;
        &lt;ul class=&quot;backline&quot;&gt;
          &lt;hr class=&quot;rohan-hr&quot;&gt;
          &lt;li&gt;
            &lt;label for=&quot;profiles_interval_1&quot;&gt;1 hours&lt;/label&gt;
            &lt;!-- &lt;input type=&quot;radio&quot; id=&quot;f-option&quot; name=&quot;selector&quot;&gt; --&gt;
            &lt;input data-url=&quot;http://www.example.com/&quot; id=&quot;profiles_interval_1&quot; name=&quot;profiles[interval]&quot; type=&quot;radio&quot; value=&quot;1&quot; /&gt;
            &lt;div class=&quot;check&quot;&gt;&lt;/div&gt;
          &lt;/li&gt;

          &lt;li&gt;
            &lt;label for=&quot;profiles_interval_6&quot;&gt;6 hours&lt;/label&gt;
            &lt;!-- &lt;input type=&quot;radio&quot; id=&quot;s-option&quot; name=&quot;selector&quot;&gt; --&gt;
            &lt;input data-url=&quot;http://www.example.com/&quot; id=&quot;profiles_interval_6&quot; name=&quot;profiles[interval]&quot; type=&quot;radio&quot; value=&quot;6&quot; /&gt;
            &lt;div class=&quot;check&quot;&gt;
              &lt;div class=&quot;inside&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;

          &lt;li&gt;
            &lt;label for=&quot;profiles_interval_24&quot;&gt;24 hours&lt;/label&gt;
            &lt;!-- &lt;input type=&quot;radio&quot; id=&quot;t-option&quot; name=&quot;selector&quot;&gt; --&gt;
            &lt;input data-url=&quot;http://www.example.com/&quot; id=&quot;profiles_interval_24&quot; name=&quot;profiles[interval]&quot; type=&quot;radio&quot; value=&quot;24&quot; /&gt;
            &lt;div class=&quot;check&quot;&gt;
              &lt;div class=&quot;inside&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- rohan ends --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row history&quot;&gt;
      &lt;div class=&quot;col-xs-12&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;history-locations col-xs-12&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;hidden&quot; id=&quot;auth-token&quot; data-token=&quot;&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;/assets/timeline/modernizr-04ac4151e53119ba85cdc7679379cd0d.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/x-tmpl&quot; id=&quot;history-locations&quot;&gt;
  &lt;section id=&quot;cd-timeline&quot; class=&quot;cd-container&quot;&gt;
    {% for (var i = 0; i &lt; o['profiles'].length; i++) { %}
      &lt;div class=&quot;cd-timeline-block location-panel&quot; data-lat=&quot;{%= o['profiles'][i]['lat'] %}&quot; data-long=&quot;{%= o['profiles'][i]['long'] %}&quot;&gt;
        &lt;div class=&quot;cd-timeline-img cd-picture&quot;&gt;
          &lt;img alt=&quot;Picture&quot; src=&quot;/assets/timeline/cd-icon-location-20955b176b47169a313e3c8c11803cc1.svg&quot; /&gt;
        &lt;/div&gt; &lt;!-- cd-timeline-img --&gt;

        &lt;div class=&quot;cd-timeline-content&quot;&gt;
          &lt;h2 class=&quot;&quot;&gt;{%= o['profiles'][i]['actual_received_at'] %}&lt;/h2&gt;
          &lt;p class=&quot;formatted-address&quot;&gt;&lt;/p&gt;
        &lt;/div&gt; &lt;!-- cd-timeline-content --&gt;
      &lt;/div&gt; &lt;!-- cd-timeline-block --&gt;
    {% } %}
  &lt;/section&gt;
&lt;/script&gt;
&lt;script src=&quot;/assets/timeline/main-f1dcfd5d7be80e6258f34c7dded2ee86.js&quot;&gt;&lt;/script&gt;


&lt;script type=&quot;text/javascript&quot;&gt;
  function FetchAndFillLocation(lat, long, infoDiv, truckNumber, speed) {
    var request = new XMLHttpRequest();
    var method = 'GET';
    var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='
              + lat
              + ','
              + long
              + '&amp;sensor=true';
    var async = true;
    request.open(method, url, async);
    request.onreadystatechange = function(){
      if(request.readyState == 4 &amp;&amp; request.status == 200){
        var data = JSON.parse(request.responseText);
        var address = data.results[0];
        infoDiv.empty();
        infoDiv.append('&lt;div class=&quot;info-box-title&quot;&gt;&lt;span class=&quot;left-align-number&quot;&gt;&lt;i class=&quot;fa fa-truck&quot;&gt;&lt;/i&gt; '+ truckNumber +'&lt;/span&gt;&lt;span class=&quot;right-align-speed&quot;&gt;&lt;i class=&quot;fa fa-tachometer&quot;&gt;&lt;/i&gt; ' + speed + ' Km/h&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;info-box-text&quot;&gt;' + address.formatted_address + '&lt;/div&gt;');
      }
    };
    request.send();
  }

  function UpdateMarkerPosition(current_location_div) {
    var request = new XMLHttpRequest();
    var method = 'GET';
    var url = '/api/v1/trucks/location?truck[slug]=abc';
    var async = true;
    request.open(method, url, async);
    request.setRequestHeader('X-Auth-Token', 'abc');
    request.onreadystatechange = function(){
      if(request.readyState == 4){
        if(request.status == 200) {
          var data = JSON.parse(request.responseText).current_cordinate;
          var truckCords = { lat: data.lat, lng: data.long }
          FetchAndFillLocation(truckCords.lat, truckCords.lng, current_location_div, data.key, data.speed);
        }
        setTimeout(function() {
          UpdateMarkerPosition(current_location_div)
        }, 10000);
      }
    };
    request.send();
  }
  $(function() {
    UpdateMarkerPosition($('.current-location'));
  })
&lt;/script&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!--/row--&gt;

      &lt;footer&gt;
      &lt;/footer&gt;

    &lt;/div&gt; &lt;!-- /container --&gt;

    &lt;script&gt;
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-81486803-1', 'auto');
  ga('send', 'pageview');
&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>