Develop Reference

Ionic/Cordova Web App - index.html errors on launch

When launching my Ionic app on iOS device and in Ionic Lab, there are various popups that appear on launching. I have not been able to find out what they mean and how to resolve so I'm hoping someone here might be able to help.
The app will load if I accept the first popup, then cancel the rest.
The popups are:
Popup 1:
gap_init:2
Popup 2:
gap:[null,"CoreAndroid","messageChannel","CoreAndroid867226728"]
Popup 3:
gap:[null,"CoreAndroid","show","CoreAndroid1105789195"]
Popup 4:
gap:[null,"CoreAndroid","overrideBackbutton","CoreAndroid633498247"]
Because of the error saying "CoreAndroid" I'm assuming it's something to do with an android configuration.
I'm using the framework based off the package found on CodeCanyon. Link below: Codecanyon Ionic App
I can post any code you wish me to so please let me know.
Here is the home.html file:
<ion-view view-title="{{appname}}">
<ion-nav-buttons side="right">
<div class="cart-total ink">
<button class="button ink icon-cart button-icon button-clear ion-ios-search-strong" ui-sref="quicksearch"></button>
</div>
<div class="cart-total ink" ui-sref="app.cart">
<div ng-if="totalCartItem>0">
<span>{{totalCartItem}}</span>
</div>
<button class="button ink button-icon button-clear fa fa-shopping-basket"></button>
</div>
</ion-nav-buttons>
<ion-content class="home bg" overflow-scroll="true" scroll-to-top="150" delegate-handle="scroller">
<ion-refresher
on-refresh="doRefresh()">
</ion-refresher>
<div class="slider" ng-if="homeSlider">
<ion-slide-box auto-play="1000" does-continue="true">
<ion-slide ng-repeat="x in slides track by $index">
<a href="#/app/{{x.params}}">
<div class="img" style="background-image: url({{x.img}})"></div>
<ion-spinner class="onload"></ion-spinner>
</a>
</ion-slide>
</ion-slide-box>
</div>
<div class="row">
<ion-scroll direction="x">
<div class="wide">
<div ng-repeat="x in categories" ui-sref="app.category({id: x.id, slug: x.slug, title: x.name})">
<div class="slide-item">
<div ng-if="!x.image" class="img" style="background-image: url(img/product.png)"></div>
<div ng-if="x.image" class="img" style="background-image: url({{x.image}})"></div>
<ion-spinner class="onload"></ion-spinner>
</div>
<span class="out"></span>
<h3 class="center" ng-bind-html="x.name"></h3>
</div>
</div>
</ion-scroll>
</div>
<div ng-if="products" class="item item-divider">
LATEST PRODUCTS
</div>
<div class="row grid" ng-repeat="x in products track by $index" ng-if="$index%2==0">
<div class="col col-50 ink item" ng-if="$index < products.length" ui-sref="app.product({id: products[$index].id})">
<div class="badge">
<span ng-if="!products[$index].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index].regular_price > 0 && products[$index].on_sale" class="sale">
{{products[$index] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index].featured_src ? products[$index].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3>{{products[$index].title}}</h3>
<span ng-bind-html="products[$index].price | currency:format:decimal"></span>
<del ng-show="products[$index].regular_price > 0 && products[$index].on_sale" ng-bind-html="products[$index].regular_price | currency:format:decimal"></del>
</div>
</div>
<div class="col col-50 ink item" ng-if="$index+1 < products.length" ui-sref="app.product({id: products[$index+1].id})">
<div class="badge">
<span ng-if="!products[$index+1].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" class="sale">
{{products[$index+1] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index+1].featured_src ? products[$index+1].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3 ng-bind-html="products[$index+1].title"></h3>
<span ng-bind-html="products[$index+1].price | currency:format:decimal"></span>
<del ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" ng-bind-html="products[$index+1].regular_price | currency:format:decimal"></del>
</div>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="more"></ion-infinite-scroll>
</ion-content>
<scroll-to-top-button animate="true">
<div class="float-button">
<span class="height-fix">
<a class="content">
<i class="ion-ios-arrow-up"> </i>
</a>
</span>
</div>
</scroll-to-top-button>
And here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<!-- NGCORDOVA -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- PAYPAL GATEWAY -->
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
</body>
</html>

Modify your index.html file. cordova.js must be called at the bottom of the page. This worked for me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>

You are using the android cordova.js in the iOS app.
You don't have to add any cordova.js file, just link it in the index.html, it will be generated per platform and copied to the right place.

Windows phone JQuery Mobile Code not working - Blank screen

I'm using visual studio to develop hybrid applications to windows phone, android and iphone.
I can't get this code to work, and I don't know why. This is working good in Android but not in Windows Phone.
Basically I can not see the form. Blank appears instead.
Can someone, please, help me?
My code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- CidadaoAtivo references -->
<link rel="stylesheet" href="css/jquery/jquery.mobile-1.4.5.min.css">
<script src="cordova.js"></script>
<!--<link rel="stylesheet" href="css/jquery/jquery.mobile.structure-1.4.5.css">-->
<script src="scripts/JQuery/jquery-2.1.3.min.js"></script>
<script src="scripts/JQuery/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/contactos.js"></script>
<script src="scripts/winstore-jscompat.js"></script>
<script src="scripts/platformOverrides.js"></script>
<div data-role="page" id="login">
<div data-role="header" style="background-color:lightblue; color:black;">
</div>
<div data-role="main" class="ui-content" style="max-width: 500px; margin:auto">
<div style="max-width: 500px; margin:auto; font-family: Arial, Helvetica, sans-serif" >
<form>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Palavra-Passe" />
<div data-role="controlgroup" data-type="vertical">
<a class="ui-btn ui-corner-all ui-icon-check ui-btn-icon-left" id="loginMail">Entrar com Email</a>
<a class="ui-btn ui-corner-all" style="background-color:blue; color:whitesmoke; background-image:url(images/Facebook_Sticker_Icon.png); background-position:10px; background-repeat:no-repeat; background-size:24px;">Entrar com Facebook</a>
</div>
</form>
</div>
</div>
<div data-role="footer" data-position="fixed" style="background-color:lightblue; color:black; font-family: Arial, Helvetica, sans-serif; font-size:10px" >
<div data-role="navbar" style="max-width: 500px; margin:auto">
<ul>
<li>Entrar</li>
<li>Registar</li>
</ul>
</div>
</div>
</div>

Set the Build Action of each script as Content. To do this right click on a script file from the Solution Explorer and choose Properties. You will get Build Action in the Properties windows then.

Worklight: Issue while rendering dojo 1.9 widgets on actual device

Environment:
Worklight 6.0
Dojo 1.9.1
ADT 22.0
API level 14
Device - Samsung Tab 3
We have developed a mobile app using worklight 5.0 and dojo 1.8.
Now we have upgraded to worklight 6.0 and dojo 1.9. After upgrade we are seeing following issue while rendering dojo widgets.
The widgets are getting rendered fine in simulator (MBS). But on the actual device, the widgets are not getting rendered properly. The tab bar buttons are getting rendered as labels with bold underline etc.
The HTML file -
<head>
<meta charset="UTF-8">
<title>RQMOffline</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/MobileApp.css">
<link rel="stylesheet" href="css/qmMobile.css"/>
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, mblThemeFiles:['#theme',['qm.mobile','qmMobile']], async: true, parseOnLoad: false, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="AppBody" >
<div id="localTestList" data-dojo-type="dojox.mobile.View" style="selected:true" >
<div id="mainViewHeadning" data-dojo-type="dojox/mobile/Heading" fixed="top">
<ul id="filtersBar" data-dojo-type="dojox.mobile.TabBar"
data-dojo-props='barType:"segmentedControl"'>
<li id="runTabBarButton" data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='label:"labelInProgress", moveTo:"downloadedTestListView", selected:true'></li>
<li id="resultTabBarButton"
data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='label:"labelCompleted", moveTo:"uploadResultListView"'></li>
</ul>
</div>
<div id="tabBarNode" data-dojo-type="dojox/mobile/Heading" fixed="bottom">
<ul id="mainTabBar" data-dojo-type="dojox/mobile/TabBar" single="true">
<li id="mainShowTcerList" data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props='icon1:"images/download-act-d.png", icon2:"images/download-act-e.png", label:"labelGetTests", moveTo:"getTestsListView"'></li>
<li id="mainShowLocalTest" data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props='icon1:"images/run-act-d.png", icon2:"images/run-act-e.png", label:"labelRunTests", selected:true'></li>
<li id="mainShowSettings" data-dojo-type="dojox/mobile/TabBarButton"
data-dojo-props='icon1:"images/setting-act-d.png", icon2:"images/setting-act-e.png", label:"labelSettings", moveTo:"settingsView"'></li>
</ul>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/MobileApp.js"></script>
<script src="js/messages.js"></script>
</body>
Note: I have added all the android related css file under www folder.
This was working fine with dojo 1.8
Any help on this will be appreciated.

I fixed this issue by doing following changes -
In dojox/mobile/deviceTheme.js, replaced "holodark" with "android" for all android devices.
For bigger font size issue, added 'targetSdkVersion' attribute to property in AndroidManifest.xml - <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="13"/>
Thanks all for your help.

ajax doesn't work on galaxy s4 with cordova 3.0

I'm starting to work with cordova and jqmobile.
I had followed some guides and some posts here but none of them are helping me.
I have created a simple test app with an ajax call that return some values. It works fine with some android's phones (i.e. Google nexus with android 4.2 , galaxy ace with android 2.3 ) but it doesn't wors with my galaxy s4.
What am I missing ??
This is my index.js
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener('mainpage',deviceReady(),false);
function deviceReady(){
deviceReadyDeferred.resolve();
}
$(document).on('mobileinit',function(){
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred,jqmReadyDeferred).then(doWhenBothFrameworksLoaded());
function doWhenBothFrameworksLoaded (){
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
loadRepos();
}
the loadRepos() function contains the ajax.
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1">
<link rel="stylesheet" href="assets/jquery.mobile/jquery.mobile-1.3.1.min.css" />
<script src="assets/jquery/jquery-1.10.2.min.js"></script>
<script src="assets/jquery.mobile/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" data-position="fixed" id="deviceready">
<h1>Ticket Test</h1>
<div data-role='navbar'>
<ul>
<li>Menu</li>
<li><a href="#popupMenu" data-rel="popup"
data-role="button" data-inline="true"
data-transition="slideup" data-icon="gear" data-theme="e">Options</a></li>
<li><a href="#mycerca" data-icon="search"
data-inline='true'>Cerca</a></li>
</ul>
</div>
</div>
<div data-role="content">
<h2>Dashboard</h2>
<table id="dashboard" data-role="table" data-mode="columntoggle"
class="ui-responsive table-stroke" data-filter="true">
<thead>
<tr>
<th>Number</th>
<th data-priority="2">Company</th>
<th data-priority="3">Queue</th>
<th data-priority="4">Receiver</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

You have an error in the following line:
document.addEventListener('mainpage',deviceReady(),false);
It should read:
document.addEventListener('mainpage',deviceReady,false);
I.e. function name, not function invocation.

Android: Twitter link is not working in phonegap app

I am new to phonegap app development. In my app I had embedded twitter timeline feed using following script in my html page:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The script is working fine, and it gave the results also. Below is the screenshot:
But, when click on image link or image: which is as follows, it opens blank:
Here, is the link:
pic.twitter.com/CJMo0nyFmH
I tried to open the link on my mobile's browser, and it worked perfectly. But, same is not working in app. Please help.
Update:
This is my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>info</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="themes/f.css" rel="stylesheet" type="text/css">
<link href="styles/dst_mobile.css" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.min.js" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="phonegap.js"></script>
<script src="code/jquery.zrssfeed.min.js" type="text/javascript"></script>
<!--<script type="text/javascript">
$(document).ready(function () {
$('#news').rssfeed('http://dstinc1913.wordpress.com/category/News/feed/', {
limit: 10,
});
});
</script>-->
</head>
<body>
<div align="center">
<div data-role="page" id="info" data-theme="c">
<div data-role="header" data-theme="a">
<h1>News</h1>
Home
</div>
<div data-role="content">
<div><a class="twitter-timeline" href="https://twitter.com/DSTinc1913" data-widget-id="350541068783210496">Tweets by #DSTinc1913</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
</body>
</html>

Here's the Fiddle.
I did no change in codes, Its working for me !! ?
What's the issue here !?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>info</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="themes/f.css" rel="stylesheet" type="text/css">
<link href="styles/dst_mobile.css" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.min.js" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="phonegap.js"></script>
<script src="code/jquery.zrssfeed.min.js" type="text/javascript"></script>
<!--<script type="text/javascript">
$(document).ready(function () {
$('#news').rssfeed('http://dstinc1913.wordpress.com/category/News/feed/', {
limit: 10,
});
});
</script>-->
</head>
<body>
<div align="center">
<div data-role="page" id="info" data-theme="c">
<div data-role="header" data-theme="a">
<h1>News</h1>
Home
</div>
<div data-role="content">
<div><a class="twitter-timeline" href="https://twitter.com/DSTinc1913" data-widget-id="350541068783210496">Tweets by #DSTinc1913</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
</body>
</html>
EDIT : Use this code to open links in childbrowser. This may help.
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.removeEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
//alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadError(event) {
alert(event.type + ' - ' + event.message);
}
function iabClose(event) {
//alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
//
function onDeviceReady() {
}
function inappbrowser()
{
iabRef = window.open('http://google.com', '_blank', 'location=yes');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
}
</script>
</head>
<body>
<h1>
THis is demo for the inappbrowser
<button onclick="inappbrowser()" type="submit">Click me</button>
</h1>
</body>
</html>