CODEWITHSUNDEEP
javascriptandroidjquerytwitter-bootstrapwebview
redrom
redrom

Reputation: 11642

Android Webview Uncaught ReferenceError: $ is not defined

I would like to display simple Bootstrap table suing Jquery in Webview.

Works fine on desktop browser, but in Chrome debugger of the webview is it throwing the following exception.

Android Webview Uncaught ReferenceError: $ is not defined

Webview is set by the following way:

public void setWebview() {
    try {
        AssetManager mgr = getBaseContext().getAssets();
        mWebView = (WebView) findViewById(R.id.intro_browser);

        InputStream in = mgr.open("www/table.html", AssetManager.ACCESS_BUFFER);
        String htmlContentInStringFormat = StreamToString(in);
        in.close();

        // Set Chrome instead of the standard WebView
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.getSettings().setJavaScriptEnabled(true);
            mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
            mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        mWebView.clearCache(true);
        mWebView.clearHistory();
        mWebView.getSettings().setAllowContentAccess(true);
        mWebView.getSettings().setBlockNetworkImage(false);
        mWebView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);
    } catch (Exception e) {
        Log.d("TEST", e.getMessage());
    }

    }

And HTML in the assets/www folder is the following:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table Fixed Header</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="bower_components/jquery/src/jquery-2.1.4.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>


    <style>
        .table-responsive>.fixed-column {
          position: absolute;
          display: inline-block;
          width: auto;
          border-right: 1px solid #ddd;
        }
        @media(min-width:768px) {
          .table-responsive>.fixed-column {
            display: none;
          }
        }

        /*Heading */

    </style>

</head>
<body>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed header-fixed">
        <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
$( document ).ready(function() {
    console.log( "ready!" );
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    $fixedColumn.find('tr').each(function (i, elem) {
      $(this).height($table.find('tr:eq(' + i + ')').height());
    });

    //ALert is not called in the Webview
    alert("TEST");
});

    </script>
</body>
</html>

How can i solve it please? Many thanks for any advice.

Upvotes: 5

Views: 6345

Answers (1)

Rafael Pacheco
Rafael Pacheco

Reputation: 552

Try change your UA (User Agent) to

Mozilla/5.0 (Linux; Android 4.1.1; HTC One X Build/JRO03C) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.58 Mobile Safari/537.31

On my case I was changing UA and the problem occurs. When I changed to this value everything works fine.

I found this on:

https://github.com/jitsi/jitsi-meet/issues/362

Upvotes: 1

Related Questions