WebViewer button alert not working

harshit · May 24, 2022, 2:37am

I'm creating an app that suggests synonyms using webviewer.

I created html file and saved, its working as expected with normal text and formatting.Buttons also appear

BUTTON TYPE="button" ONCLICK="alert(' first ')">1st</BUTTON

But the html alert is not working in webviewer.

Am I missing something here or are there better ways of suggesting list of synonyms to user via html pop ups?

Here is the html file

<!DOCTYPE html>
<html>
<body>

<h1>My  Heading</h1>

<p>My
<BUTTON TYPE="button" ONCLICK="alert(' first ')">1st</BUTTON> 
paragraph
<BUTTON TYPE="button" ONCLICK="alert(' this day ')">today</BUTTON> 
</p>
</body>
</html>

the same is working on desktop

ABG · May 24, 2022, 2:39am

Export your .aia file and upload it here.
export_and_upload_aia

harshit · May 24, 2022, 2:52am

sorry, cannot upload full aia due to proprietary elements. I've added all relevant code in the question. Please let me know if more information needed

SHUBHAMR69 · May 24, 2022, 6:48am

Make a duplicate project which contains both the relevant code and the error or problem.

TIMAI2 · May 24, 2022, 8:25am

Works OK for me

<!DOCTYPE html>
<html>
<body>

<h1>My  Heading</h1>

<p>My
<BUTTON TYPE="button" ONCLICK="alert(' first ')">1st</BUTTON> 
paragraph
<BUTTON TYPE="button" ONCLICK="alert(' this day ')">today</BUTTON> 
</p>
</body>
</html>

and if using a path to the ASD for the html file:

harshit · May 24, 2022, 1:18pm

Is it emulator or mobile? Its not working on mobile for me

TIMAI2 · May 24, 2022, 2:24pm

Do you mean companion or compiled on mobile ?

Works for me on device (Android 12) for both with http://localhost/alerts.html

Juan_Antonio · May 24, 2022, 4:54pm

Another code with JavaScript:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customized alert box with jQueryUI</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#jquery-ui-dialog").dialog();
        });
    </script>
</head>
<body>
    <main style="display: flex; justify-content: center;">
        <div id="jquery-ui-dialog" title="A dialog">
            <p>You can move this dialog box, or close it with the 'X' sign at the top-right.</p>
        </div>
    </main>
</body>
</html>

borrar_alerta.aia (2.7 KB)

Summary

<html>
<head>
    <meta charset="utf-8">
    <title>Customized alert box with jQueryUI</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
	
    <script>
        $(function() {
            $("#jquery-ui-dialog").dialog();
        });
    </script>
</head>
<body>
    <main style="display: flex; justify-content: center;">
        <div id="jquery-ui-dialog" title="A dialog">
            <p>Click  'X' to close this dialog box. Click this text to return string: "not_visible".</p>
        </div>
    </main>
<script>
    $("#jquery-ui-dialog").click(function(){
      //  Swal.fire(  'Are you done?',);
    window.AppInventor.setWebViewString("not_visible");		
    });
	
</script>
</body>
</html>

harshit · May 25, 2022, 1:27am

Uploaded html is working perfectly.
But html created and saved in app just shows the content with format.

In my case, the html content is not constant, some of context is received from server and processed in the app. As a sample, I put below content and saved as a html file in blocks, and loaded in webviewer after filesaved. Now the contents and format of text are visible .but neither button , nor href is replacing the h3 content on mobile.

<!DOCTYPE html>
<html>
<style>
.header {
                        /* Stick to the top */
                        position: sticky;
                        overflow: auto;
                        top: 0;
						background:cyan
		}
div.b {
  word-wrap: normal;
}

</style>
<script type = "text/javascript">

const myObj = { 
"Good":["Nice,Happy"],
"fable":["legend,story,parable"],
"ridiculed":["mocked"],
"pace":["walk"],
"beat":["defeat,pound"],
"fatigue":["tired,washout,weary"],

 };
	//<a href="javascript:findMeaning('Good')">Good</a>
	
function findMeaning(textval) {  
var obj;
obj = JSON.parse(JSON.stringify(myObj));
document.getElementById("id01").innerHTML = obj[textval];
}

</script>
<body>
<header id="header"; class="header"><h3 id="id01">Click on the words to find synonyms</h3></header>
Have a <button onclick="findMeaning('Good')">Good</button> day ahead.<br><br>
The hare and the tortoise <a href="javascript:findMeaning('fable')">fable</a>.<br>

</body>
</html>

.header {
/* Stick to the top */
position: sticky;
overflow: auto;
top: 0;
background:cyan
}
div.b {
word-wrap: normal;
}

Click on the words to find synonyms

Have a Good day ahead.

The hare and the tortoise fable.

harshit · May 25, 2022, 3:11am

Is it because I'm opening it as a file, instead of opening it on localhost path?
What would be localhost path in this case?

I tried http://localhost/userText.html in above example as well, but it gave 404 Not found error.
if we load the usertext.html in webviewer under http path, it works with java script, else it loads as a read only display file

I guess this is the same issue

harshit · May 25, 2022, 4:44am

It works for http://localhost path but in mycase I have created and saved html within app itself. when filepath is used, webviewer just displays it without running script. What is the localhost path of user created file?

TIMAI2 · May 25, 2022, 7:59am

For html files not in assets, you should use a full file path, e.g.

file://storage/emulated/0/Android/data/<packageName>/files/mywebfile.html

You only use http://localhost/# for assets.

Are you testing with companion on a device, or using the AI2 emulator (the emulator probably has an outdated version of the webview component, with less built-in features - js/jquery/etc.)?

harshit · May 25, 2022, 10:13am

I'm testing with apk file on the phone.
I tried with above file:/// path and the html opened up but the hyperlinks are not working

From the link below I understand that browsers treat http:// and file:/// differently

In summary, file:/// will be treated as under FTP and hence hyperlinks/buttons dont work.

So, we need to know a way in which we can access locally created files using http://
or enable fileURLs using extensions Loading local web content on Android

TIMAI2 · May 25, 2022, 12:22pm

You could try using this:

TIMAI2 · May 25, 2022, 12:47pm

I have just compiled an apk that copies an html file from assets to the ASD
Tested on Android 10 and 12. The javascript works on both and delivers the synonyms using the file:///... protocol

Also, I see in your blocks you are asking for WRITE_EXTERNAL_STORAGE permission (?)
Which Android version are you working with?

harshit · May 25, 2022, 3:37pm

Worked.. Thank you

TIMAI2 · May 25, 2022, 3:38pm

Which is odd, because it uses the same webviewer ? And the file path also uses the file:/// protocol?

from the extension source:
webViewer.GoToUrl("file://" + filePath);

harshit · May 26, 2022, 2:46am

Initially it didnt work in NoFileHtml, but after I removed the comments in javascript and html (as hinted in NoFileHtml page) it started working. I tried now with native webviewer, and its working there as well. I guess it wasnt working earlier due to comments in javascript and html. If its so, can it be given a hint in Help document of webviewer?

harshit · May 29, 2022, 1:41pm

And also please provide a hint that semicolons are also mandatory in javascript code,as webviewer parser doesn't insert them, hence it behaves essentially like a one-line code

system · June 5, 2022, 1:42pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.