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.
Related
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 * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' 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 * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' 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.
I am using https://build.phonegap.com to create phonegap .apk file.
After opening .apk file I have got a very peculiar bug regarding tabindexing. Tab button of soft keybord is not shifting cursor to next textbox from a textbox.
Tabbing is working fine from input[type=tel] but not from input[type=text], input[type=email] and input[type=search].
Device used is Iball slide 3G Q1035 tablet and android version is 4.2.2.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<form>
<div>
<span><input id='test1' tabindex='1' name='test1' type='text'></span>
</div>
<div>
<span><input id='test2' tabindex='2' name='test2' type='text'></span>
</div>
<div>
<span><input id='test3' tabindex='3' name='test3' type='search'></span>
</div>
<div>
<span><input id='test4' tabindex='4' name='test4' type='url'></span>
</div>
<div>
<span><input id='test5' tabindex='5' name='test5' type='email'></span>
</div>
<div>
<span><input id='test6' tabindex='6' name='test6' type='tel'></span>
</div>
</form>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
INDEX.JS
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
},
receivedEvent: function(id) {
}
};
Jquery mobile styles are not rendering in android App when storing the jquery mobile css and js file locally in assets folder of android project. But the same is working by including the jquery mobile files from CDN. Help me
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="file:///android_asset/www/js/cordova-2.7.0.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.3.2.min.js"></script>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/TamkeenJQ.js"></script>
-->
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
<button onclick="changePageFn()">Change Page</button>
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
</html>
First add the jquery css files.
Then add the jquery 1.9.1 js file.
then add the jquery mobile 1.3.2 js file.
Actually it looks some issue in your implementation.
If you have included the correct path of your js and css files related to jquery mobile.
Solution: Reverify the path of js and css files.
Use the following order in the head tag
<link rel="stylesheet" href="css/jquerymobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquerymobile-1.3.2min.js"></script>
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.
Im using Jquery mobile,Phonegap, and jquery validation to validate a contact form .
so the problem occurs when i go from an index page to my contact form page using a link in my index page.then when i try to validate my form using the submit button,my form is been submitted even if the form is not valid.But when i make my contact form my index page that means i don't navigate between pages my form validation works very well.
here's the code of my contact page :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageinit", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
index
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>
and here is my index page :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
//*********************************************************
// Wait for Cordova to Load
//*********************************************************
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header">
<h1>plane</h1>
</div>
<div data-role="content">
some content
begin
</div>
</div>
</body>
</html>
any help will be appreciated.
Try these url for validation
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gestion des tests</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageshow", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
index
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>