Jquery 在混合 android 中不起作用，但在 web 中工作

Question

I try to make this work in my hybrid app however it does not want to function, anybody any idea why it does not work?

jQuery().ready(function () {

        $("#b4all_about").bind('click', function (e) {
            //alert();
            $("#tbb4all_about").removeClass("b4DisplayNone").addClass("b4DisplayBlock");
            $("#tbb4all_works").removeClass("b4DisplayBlock").addClass("b4DisplayNone");
            $("#tbb4all_join").removeClass("b4DisplayBlock").addClass("b4DisplayNone");
        });
        $("#b4all_works").bind('click', function (e) {
            $("#tbb4all_about").removeClass("b4DisplayBlock").addClass("b4DisplayNone");
            $("#tbb4all_works").removeClass("b4DisplayNone").addClass("b4DisplayBlock");
            $("#tbb4all_join").removeClass("b4DisplayBlock").addClass("b4DisplayNone");
        });
        $("#b4all_join").bind('click', function (e) {
            `enter code here`$("#tbb4all_about").removeClass("b4DisplayBlock").addClass("b4DisplayNone");
            $("#tbb4all_works").removeClass("b4DisplayBlock").addClass("b4DisplayNone");
            $("#tbb4all_join").removeClass("b4DisplayNone").addClass("b4DisplayBlock");
        });
});

my MainActivity looks like:

WebView web = new WebView(this);
SetContentView(web);
web.Settings.JavaScriptEnabled = true;
web.AddJavascriptInterface(new JS2CS(this), "JS2CS");
web.LoadUrl(mobile2.security.key.content);

The buttons as this:

<div style="width: 100%; align-items: center">
   <div class="sGeneral" id="b4all_about">About us</div>
   <div class="sGeneral" id="b4all_works">How it works</div>
   <div class="sGeneral" id="b4all_join">Join us</div>
</div>

And the hidden divs like this:

 <table>
    <tr>
        <td>
            <div id="tbb4all_about" class="b4DisplayNone">1</div>
            <div id="tbb4all_works" class="b4DisplayNone">2</div>
            <div id="tbb4all_join" class="b4DisplayBlock">3</div>
        </td>
    </tr>
</table>

On thing might be an issues but I am not sure as its a web application but using normal jquery as:

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery-ui-1.10.4.js" type="text/javascript"></script>
<link href="css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" />
<link href="css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet" />

Thanks for the great advise already )

-----UPDATE----- I check the log in Xamarin and see this:

E/eglCodecCommon( 2140): **** ERROR unknown type 0x65080020 (glSizeof,73) "Uncaught SyntaxError: Unexpected token <", source: http://192.168.0.16:8081/home.aspx/js/jquery-2.1.1.min.js (3) I/chromium( 2140): [INFO:CONSOLE(3)] "Uncaught SyntaxError: Unexpected token <", source: http://192.168.0.16:8081/home.aspx/js/jquery-2.1.1.min.js (3) "Uncaught SyntaxError: Unexpected token <", source: http://192.168.0.16:8081/home.aspx/js/jquery-ui-1.10.4.js (3) "Uncaught ReferenceError: $ is not defined", source: http://192.168.0.16:8081/home.aspx/ (53) I/chromium( 2140): [INFO:CONSOLE(3)] "Uncaught SyntaxError: Unexpected token <", source: http://192.168.0.16:8081/home.aspx/js/jquery-ui-1.10.4.js (3)

No idea why it tries to load the js scripts like this, how should I get the jquery includes to th client?

I found the reason why it does not load, I have includes into my webpage which I load into the hybrid android app, this is not loaded good. Should I include these into the app are have a other references to the includes for jquery.

My jQuery is like this:

<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/jquery-ui-1.10.4.js" type="text/javascript"></script>
<link href="/css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" />
<link href="/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet" />

Answer 1

Try this

WebView wb = new WebView(this);
    wb.getSettings().setJavaScriptEnabled(true);
    wb.getSettings().setDomStorageEnabled(true);
    wb.getSettings().setAllowFileAccessFromFileURLs(true);
    wb.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

Add the above features to your webView. it may work, i didn't test it.

Answer 2

Its working fine. Try to execute it.

My issue was Https. When I use http in xamarin.android it throwing above error. But working fine on https.

<html>
<body>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <h1>HybridWebView Test</h1>
    <br />
    Enter name: <input type="text" id="name">
    <br />
    <br />
    <button type="button" onclick="javascript: invokeCSCode($('#name').val());">Invoke C# Code</button>
    <br />
    <p id="result">Result:</p>
    <script type="text/javascript">
        function log(str) {
            $('#result').text($('#result').text() + " " + str);
        }

        function invokeCSCode(data) {
            try {
                log("Sending Data:" + data);
                invokeCSharpAction(data);
            }
            catch (err) {
                log(err);
            }
        }
    </script>
</body>
</html>