Software Archive
Read-only legacy content
17061 Discussions

Problem with AJAX only on Android (iOS works fine)

Sergio_S_1
Beginner
276 Views

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:

Untitled.png

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&amp;showinfo=0' frameborder='0' allowfullscreen></iframe></p>";
            }
            
            result += "</ul></div>";
        });
        
        $( result ).appendTo( "#main" ).enhanceWithin();
        $('#main').enhanceWithin();
        
}
});
}

Here is my Built Settings and Plugins:

Intel® XDK.png   Intel® XDK.jpg

Please can someone explain me why is this not working specifficaly on Android? How can i fix this?

Thank you!

0 Kudos
1 Reply
PaulF_IntelCorp
Employee
276 Views

Change your version of jQuery to the current jQuery 2 library. We have recently found issues with the jQuery 1 libraries. We do now know why they fail, only that they appear to no longer be compatible with the current Android Cordova frameworks. See this thread for more details > https://software.intel.com/en-us/forums/intel-xdk/topic/621660#comment-1867172

0 Kudos
Reply