Hello everyone,
I'm starting working in Intel XDK (since 4 days ago ;-) ), and i'm encountering a few issues. My project is like a News feed that displays them dynamically, by asking to a server (my own server) to send the data. Well in this app i'm using Ajax, JSON and Javascript.
My problem is that on the Emulator and on iOS (iPhone 6 using App Preview) it shows everything with no problem, but on my Android (Samsung Galaxy S4 Mini using App Preview and also connected to the PC to Debug) it doesn't work!
I believe that this might be somekind of "quick-fix" but after search on the forum and also on the web, testing a few things i saw it still doesn't work only on Android. Here is the different result:
Here is my HTML Code (pretty simple i guess...):
<!DOCTYPE html>
<html>
<head>
<title>MyNews Portugal</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script> <!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script> <!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script> <!-- normalizes device and document ready events, see file for details -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="splashscreen" class='ui-loader heavy'>
MyNews
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>A iniciar</h1>
</div>
<!--################# START PAGE principal #################-->
<div data-role="page" id="principal">
<div data-role="panel" id="sidebaropcoes" data-display="reveal" data-position="right">
<h2>Opções</h2>
<p>Variadas opções!</p>
</div>
<div data-role="header" data-theme="a">
<a href="" data-role="button" class="ui-btn ui-btn-b ui-corner-all ui-icon-home ui-btn-icon-notext ui-nodisc-icon" data-transition="slideup">Home</a>
<a href="#sidebaropcoes" data-role="button" class="ui-btn ui-btn-b ui-corner-all ui-icon-bars ui-btn-icon-notext ui-nodisc-icon" data-transition="slideup">Opções</a>
<h1>Bem-vindo!</h1>
</div>
<div data-role="main" class="ui-content" id="main" >
<div id="list"></div>
</div>
<script>
getnews();
</script>
</div>
<!--################# END PAGE principal #################-->
<div data-role="page" id="opcoespage">
<div data-role="header" data-theme="a">
<a href="#principal" data-role="button" class="ui-btn ui-btn-b ui-corner-all ui-icon-home ui-btn-icon-notext ui-nodisc-icon" data-transition="slideup">Home</a>
<a href="" data-role="button" class="ui-btn ui-btn-b ui-corner-all ui-icon-bars ui-btn-icon-notext ui-nodisc-icon" data-transition="slideup">Opções</a>
<h1>Opções</h1>
</div>
</div>
</body>
</html>
Now my Javascript/Ajax:
function getnews() {
$.ajax({
type:'GET',
url:'http://myserver.domain/db.php',
success: function (data) {
var result = "";
$.each(data.noticia, function(i, x){
result += "<div data-role='collapsible'><h4>"+x.titulo+"</h4><ul data-role='listview'><p>"+x.texto+"</p>";
if(x.img1 != '' || x.img2 != '' || x.img3 != ''){
result += "<p style='text-align:center;'>";
if(x.img1 != ''){
result += "<img src='"+x.img1+"' style='width:95%;'>";
}
if(x.img2 != ''){
result += "<img src='"+x.img2+"' style='width:95%;'>";
}
if(x.img3 != ''){
result += "<img src='"+x.img3+"' style='width:95%;'>";
}
result += "</p>";
}
if(x.video != ''){
result += "<p style='text-align:center;'><iframe width='95%' src='https://www.youtube.com/embed/"+x.video+"?rel=0&showinfo=0' frameborder='0' allowfullscreen></iframe></p>";
}
result += "</ul></div>";
});
$( result ).appendTo( "#main" ).enhanceWithin();
$('#main').enhanceWithin();
}
});
}
Here is my Built Settings and Plugins:
Please can someone explain me why is this not working specifficaly on Android? How can i fix this?
Thank you!
Link Copied
