Today I am working on a news app for my website. The news is received in JSON format and will be used in a Local HTML file with a JS function wich will fill the html page. This JS Function is called with the evalJS method of the webview. This works fine on the iPhone Emulator, but on the Android Emulator the HTML file is loaded, but not filled in with any data, it seems that the JS function isn't called.
In the android emulator I get a few errors. They are viewable on: http://pastebin.com/B2NxLccV
The code:
The Window file:
var loader = Titanium.Network.createHTTPClient(); loader.open("GET",Ti.App.API.newsItem + "?id="+Ti.UI.currentWindow.rowData.id); loader.onload = function() { if(this.responseText == 'ITEM_NOT_FOUND') { var alertDialog = Titanium.UI.createAlertDialog({ title: L('error'), message: L('ITEM_NOT_FOUND_MESSAGE'),buttonNames: [L('OK')] }); alertDialog.show(); } else { var data = JSON.parse(this.responseText); var webview = Titanium.UI.createWebView({ url:'/ui/tabs/NewsItem.html' }); webview.addEventListener('load', function(e) { webview.evalJS("fillArticle('"+data.title+"','"+data.created+"','"+data.article+"');"); }); Ti.UI.currentWindow.add(webview); } }; loader.onerror = function(e) { var alertDialog = Titanium.UI.createAlertDialog({ title: L('error'), message: L('error_internet'),buttonNames: [L('OK')] }); alertDialog.show(); }; loader.send();The HTML file
<html>
<head>
<title>Item</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height,user-scalable=no">
<style type="text/css">
html, body {
margin:0;
padding:0px;
background: #EAEEEF;
font-family: Arial;
}
#article_info {
width: 96%;
padding: 2%;
height: auto;
border-bottom: 1px solid #CCC;
}
#article_info h1 {
display: block;
color: #33393E;
text-decoration: none;
font-size: 15pt;
margin:0;
padding:0;
}
#article_info span#article_created {
font-size: 10pt;
color: #33393E;
}
#article_content {
width: 96%;
padding: 2%;
height: auto;
}
p {
padding: 0px;
margin:0px;
}
a {
color: #09C;
font-weight: bold;
text-decoration: none;
}
</style>
<script type="text/javascript" src="app:///base64.js"></script>
<script type="text/javascript" src="app:///jquery.js"></script>
<script type="text/javascript">
function fillArticle(title,created,articleEncoded) {
$(function() {
var article = decode64(articleEncoded);
$("#article_title").text(title);
$("#article_created").text("Geplaatst op " + created);
$("#article_content").html(article);
});
return true;
}
</script>
</head>
<body>
<div id="article_info">
<h1 id="article_title">Laden van artikel</h1>
<span id="article_created"></span>
</div>
<div id="article_content"><p>Pagina word geladen. Duurt dit te lang? Controleer dan uw internetverbinding.</p></div>
</body>
</html>