Javascript function does not reverses text

MIT App Inventor Help
1

I started to study the WebViewerJavascript-Tutorial and constructed the app discribed in http://appinventor.mit.edu/explore/ai2/webview-javascript
Meanwhile I developped a version without error message, but there is no reverse text (I hit “opowoj” in the text label and got “opowoj” back with a TIMOUT message.

P1000779
P10007792560×1920 1.95 MB

I add also the app file WebViewJavascriptProc_1.aia (4.5 KB)

and the html file as txtjavascriptWebViewProcessor.html.txt (1.3 KB) file:

<!doctype html>
<head>
<title>WebView Javascript Processor</title>
</head>

<body onload="processJavascript();">
<b>This page includes a javascript function that reverses text.</b>
<p>The javascript function incorporates a special App Inventor feature called <i>window.AppInventor.getWebViewString()</i>, which allows App Inventor apps to communicate with the WebViewer component's internal processing of javascript.
<p>This simple example shows how to use the <i>window.AppInventor.getWebViewString()</i> function to pass data to and from the WebViewer component, and thereby an App Inventor app.

<script>
    var result = new Date().toString();
    var appInventorInput = window.AppInventor.getWebViewString();
        function processJavascript() {
        if (appInventorInput.length > 0) {
            document.write( "WebView InputString received FROM app:
" + appInventorInput );
            result = appInventorInput.split("").reverse().join("");
            document.write( "<p/>WebView InputString sending BACK TO app:<br/>" +
            result );
        } else {
            document.write( "No WebView InputString set by app at: <br/>" + result );
        }
        window.AppInventor.setWebViewString( result );
    }
</script>

</body>
</html>

(javascript code added by Taifun into the thread)

Thank you for any hint…

2

If you are asking for help, I recommend you to make it as easy for others to be able to help you …
You probably will get more feedback then…

which means in your case post a screenshot of your relevant blocks as well as the Javascript code directly into your post…

To download the aia file, upload it to App Inventor, open it, do some bug hunting for you, etc… this takes time, and most people will not do that…
Thank you.

Taifun

Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

3

Thank you Taifun,

here follows the javascript

grafik
grafik1795×715 32.8 KB

and here are the blocks via attachment

blocks(1)
blocks(1)1105×1015 79.9 KB
:

I hope it’s easier now. Thanks for any help…

4

you do not need a Clock component anymore…
you now can use the WebViewStringChange event instead…

EDIT: does the simple example work for you?
How does the property Webviewer.WebViewString work?

EDIT2: what happens, if you remove the function processJavascript()?
just write the code in between the <script> tags as shown in the simple example…

Taifun

5

Hello Taifun,
so I deleted all blocks containing the clock elements.

But I have no idea, what’s a “WebViewStringChange event” is. I can’t work simultanously on two projects. I cancelled the line with the function in the html file and the last bracket.

Here follow the blocks and the javascript:

blocks(2)
blocks(2)917×572 38.1 KB

WebViewStringChange_
WebViewStringChange_2155×1022 105 KB

The reaction after clicking the button “Process” is: nothing

6
7

If all you want to do is reverse text using javascript, get Andres Cotes’ js extension and use that.

blocks

reverse.aia (18.9 KB)

3 Likes
8

Of course, you can always just use blocks to reverse text:

blocks (1)

or

blocks (2)

9

Building on @TimAI2’s list reverse technique, try this draggable procedure …
reverse2 reverse2_test

10

FYI: the next components release will include a text reverse block
72915863-ebb21180-3d38-11ea-8559-40b521969598

11

Just for completeness, two methods for using the webviewer to reverse text (using companion)

blocks (4)
blocks (4)736×510 35.1 KB

HTML

<DOCTYPE html>
<html>
<body>
<script>
var text = window.AppInventor.getWebViewString();
var reverse = text.split("").reverse().join("");
window.AppInventor.setWebViewString(reverse);
</script>
</body>
</html>
12

Hello dear supporters,
thank you very much for the heavy box of usable hints. I’ll have plenty to do testing them all. My focus at the moment is using a javascript for getting an app result via WebViewer…

1 Like
13

Hello Conor, thank you for your reply in special. My questions:

What is “FYI”?
When will be the next components release be?

14

FYI = for your information

releases every couple of months or so, but not everything planned makes it in every time

15

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