Dynamic content in webview with Alloy

You must Login before you can answer or comment on any questions.

Hi everyone, I am developing an app using alloy. Stuck on a problem with webviews now unfortunately. I want to display simple text with a bit of formatting.

This is what I have so far: assets/webViews/history.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="webviews.css"/>
                <script src="history.js"></script>
    </head>
    <script>
        Ti.App.addEventListener("app:fromTitanium", function(e) {
            document.getElementById('localHistoryText').value = e.message;
            alert(e.message);
        });
        </script>
    <body>
        <p id="localHistoryText">Text should appear here</p>
    </body>
</html>
assets/webViews/webviews.css

p { color: #1D1C1C; font-size: 18px; line-height: 140%; font-family: Arial;

}

in history.xml just simply:

<Alloy>
    <Window id="w_history" onOpen="construct">
            <WebView id="webview" url="webViews/history.html" />
    </Window>
</Alloy>
In history.js I want to be able to do this:
Ti.App.fireEvent('app:fromTitanium', { message: L('history_text') });
This does nothing right now. If I use normal text for the message and simply alert it, it does not work either. There must be something wrong with the script directory. I dunno how to put it though. Tried alloy/controllers/history.js and /history.js.

or alternativley something like this would be ideal, but I doubt it'll work.

<body>
    <p id="localHistoryText">L('history_text')</p>
</body>

Any help would be greatly appreciated!

iOS 6.1 Simulator Mac osx 10.8.2 Latest titanium SDK and Alloy versions.

1 Answer

Accepted Answer

Try this code:

app/assets/webViews/history.html (use "innerHTML" instead of "value" to set text)

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="webviews/webviews.css"/>
    </head>
    <script>
        Ti.App.addEventListener("app:fromTitanium", function(e) {
            document.getElementById('localHistoryText').innerHTML = e.message;
        });
        </script>
    <body>
        <p id="localHistoryText">Text should appear here</p>
    </body>
</html>
app/views/history.xml (use the "load" event of the web view to init your text, not the window open event)
<Alloy>
    <Window id="w_history" >
        <WebView id="webview" url="webViews/history.html" onLoad="construct"/>
    </Window>       
</Alloy>
app/controllers/history.js
function construct() {
  Ti.App.fireEvent('app:fromTitanium', { message: "some text" });
}
 
$.w_history.open();

Your Answer

Think you can help? Login to answer this question!