Below is the code I have tried. When I execute the code below it appears as when I click a button in my application and it is opening device phone book and displaying contacts. When I click on any contact it is picked by application but it should not open device address book but when clicked it should display the contacts of my device in my application. Can anyone suggest me how to do this?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, r-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl" class="platform-android platform-cordova platform-webview">
<ion-pane>
<ion-header-bar class="bar-stable">
<button class="button" ng-click="pickContact()">Contacts</button>
<h1 class="title">All Contacts</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item item-thumbnail-left" ng-repeat="contact in data.selectedContacts">
<img src="{{contact.photos[0].value}}" ng-if="contact.photos.length > 0">
<h2>{{contact.displayName}}</h2>
<p ng-if="contact.emails.length > 0">{{contact.emails[0].type}} : {{contact.emails[0].value}}</p>
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : {{contact.phones[0].value}}</p>
</a>
</div>
<p class="padding"></p>
</ion-content>
</ion-pane>
</body>
</html>
Javascript:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.service("ContactsService", ['$q',
function($q) {
var formatContact = function(contact) {
return {
"displayName": contact.name.formatted || contact.name.givenName + " " + contact.name.familyName || "Unknown Person",
"emails": contact.emails || [],
"phones": contact.phoneNumbers || [],
"photos": contact.photos || []
};
};
var pickContact = function() {
var deferred = $q.defer();
if (navigator && navigator.contacts) {
navigator.contacts.pickContact(function(contact) {
deferred.resolve(formatContact(contact));
});
} else {
deferred.reject("Hurray!!!!...... No contacts in desktop browser");
}
return deferred.promise;
};
return {
pickContact: pickContact
};
}
])
.controller("AppCtrl", ['$scope', 'ContactsService',
function($scope, ContactsService) {
$scope.data = {
selectedContacts: []
};
$scope.pickContact = function() {
ContactsService.pickContact().then(
function(contact) {
$scope.data.selectedContacts.push(contact);
console.log("Selected contacts=");
console.log($scope.data.selectedContacts);
},
function(failure) {
console.log("Hurray!!!!...... Failed to pick a contact");
}
);
}
}
])
You could try using $cordovaContacts which is a part of the ngCordova (ngCordova needs to be installed). You can install in your app with the command cordova plugin add cordova-plugin-contacts. Then there is a simple function to getting all contacts in your contacts list.
$scope.getAllContacts = function() {
$cordovaContacts.find({filter: '',multiple:true}).then(function(allContacts) {
$scope.contacts = allContacts;
});
};
Note: It seems to be so that the find() function in $cordovaContacts can not be empty. Include ie. a filter in there for it to work.
EDIT:
This is a demonstration of the general structure and functions which you need to make the ngCordova contacts plugin to work.
Here's all my code you'll need in a JSFiddle: https://jsfiddle.net/thepio/osjppoqu/
And then I just call the getAllContacts function using a button click in my app.html file like this:
<button type="button" ng-click="getAllContacts()" class="button button-block button-positive">Get contacts</button>
REMEMBER it only works on a real device, probably not even emulator (haven't tested though). Include the ngCordova in your module. If you're calling the contacts plugin without a click or something remember that it is required that it's only called AFTER the device is ready. In Ionic you can do this with the following:
$ionicPlatform.ready(function() {
// Call the plugin here
});
Related
I am buiding an app with Cordova 3.6.3 in netbeans and trying to emulate with Ripple 0.9.15.
Whenever I run the code I keep getting:
Uncaught TypeError: Cannot read property 'fire' of undefined ripple.js:40
deviceready has not fired after 5 seconds. cordova.js:1168
Channel not fired: onPluginsReady cordova.js:1161
Channel not fired: onCordovaReady
The code is supposed to access the file system, create some files and display them in
a listview. Here it is:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Directory Reader</title>
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="js/libs/jquery/jquery-1.10.0.min.js"></script>
<script src="js/libs/jquery-mobile-1.4.3/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {navigator.alert('file access');
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0, onFileSystemSuccess, fail
); navigator.alert('file access');
}
function onFileSystemSuccess(fileSystem) {
// Create some test files
fileSystem.root.getDirectory("myDirectory",
{create: true, exclusive: false},
null, fail);
fileSystem.root.getFile("readthis.txt",
{create: true, exclusive: false},
null, fail);
var directoryReader = fileSystem.root.createReader();
// Get a list of all the entries in the directory
directoryReader.readEntries(success, fail);
}
function success(entries) {
var i;
var objectType;
for (i = 0; i < entries.length; i++) {
if (entries[i].isDirectory === true) {
objectType = 'Directory';
} else {
objectType = 'File';
}
$('#directoryList').append('<li><h3>' + entries[i].name + '</h3><p>' + entries[i].toURI() + '</p><p class="ui-li-aside">Type:<strong>' + objectType + '</strong></p></li>');
}
$('#directoryList').listview("refresh");
}
function fail(error) {
alert("Failed to list directory contents: " + error.code);
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Directory Reader</h2>
</div>
<div data-role="content">
<ul id="directoryList" data-role="listview"
data-inset="true">
</ul>
</div>
</div>
</body>
</html>
Please what can I do?
Please what could the problem be?
Getting error
"11-13 13:10:55.470: E/Web Console(9799):
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17 at
file:///android_asset/www/index.html:304"
when converting html div content to canvas in android with phonegap.
It is working properly on browser. Any help will be appreciated. I am using jQuery-1.9.1, jQuery-UI.
code snippet:
// html file
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="resourcess/css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="resourcess/css/style.css" />
</head>
<body>
<div class="imag-container">
<div class="dragImg">
<div id="dropHere"></div>
<div id="click" > click </div>
<div id="img-check">check</div>
<canvas id="canvas" width="100" height="100">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
// script
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0] );
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-ggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
$('#click').click(function(){
//Some code
var domElement = document.getElementById('dropHere');
setTimeout(function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.getElementById("canvas");
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 50, 50,0,0,100,100);
}
});
}, 10000);
});
});
I am trying to develop an android application which can play audio files, through Phonegap framework.
Below is the code for that, which is not the index.html, but another HTML page in the project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>A New App Try</title>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
-->
<script src="/android_asset/www/js/corodova.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/MyownTry.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="/android_asset/www/js/jquery-1.10.2.js"></script>
<script src="/android_asset/www/js/jquery.mobile-1.3.2.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/jquery.mobile.structure-1.3.2.css" />
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
/*
function onDeviceReady() {
playAudio("../assets/files/Roja_Flute.mp3");
}
*/
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
if (!playing) {
my_media.play();
document.getElementById('play').src = "/android_asset/www/img/pause_icon.jpg";
playing = true;
} else {
my_media.pause();
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";
playing = false;
}
}
// Pause audio
//
/* function pauseAudio() {
if (my_media) {
my_media.pause();
}
}*/
// Stop audio
//
function stopAudio() {
my_media.stop();
playing = false;
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
<style>
img{
width=30%;
}
</style> </head>
<body>
<br/><br/>
<img id="play" src="/android_asset/www/img/Playicon.png"/>
<!-- <img id="pause"src="/android_asset/www/img/pause_icon.jpg" width="20%"/> -->
<img id="stop" src="/android_asset/www/img/stop_icon.jpg" />
<!-- <p id="audio_position"></p>-->
<br/><br/>
Go back to Home Page
<div data-role="footer">
<p>Copyright 2013 | Mani C | newtolearn.android</p>
</div>
</div>
</body>
</html>
I am expecting icons to be smaller ones, as I have defined in the style element, for 30% of image size. And, I am expecting when I click on the Play icon, the audio file to be played.
Unfortunately both the expected behaviors are not occuring. I am seeing a larger 'Play icon', smaller 'Stop icon' and getting, 'Uncaught Reference Exception: variable playAudio is undefined in index.html'(when in fact, the above HTML code has nothing to do with index.html).
Can somebody, please help and can possibly provide a workaround code..?
Thanks in advance!
Mani
I'm developing a very simple webapp with Phonegapp, and I want to open the Play Store APP (Android), when the user clicks on a specific button. I read some q%a but I don't know how I can do it
I have a index.html like this:
<!DOCTYPE html>
<html>
<head>
<title>Just a development test ->dany_danay</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var watchID = null;
var pictureSource; // Origen de la imagen
var destinationType; // Formato del valor retornado
// Espera a que PhoneGap conecte con el dispositivo.
//
document.addEventListener("deviceready",onDeviceReady,false);
function alertDismissed() {
// do something
}
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Your SmartPhone info</h1>
</div>
<center><a href="https://play.google.com/store/apps/details?id=com.tusmartphone.dany&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS50dXNtYXJ0cGhvbmUuZGFueSJd" rel="external" /><img src="http://media.go2speed.org/brand/files/offermobi/1981/20130605194659-WARFAL_b01_320X50_04.png"/></a>
</center>
</body>
</html>
I tried adding rel="external" or rel="system" in the
and this js function:
<script type="text/javascript">
$(function() {
updateAndroidMarketLinks();
// some more core here ...
function updateAndroidMarketLinks()
{
var ua = navigator.userAgent.toLowerCase();
if (0 <= ua.indexOf("android")) {
// we have android
$("a[href^='http://play.google.com/']").each(function() {
this.href = this.href.replace(/^http:\/\/play\.google\.com\//,
"market://");
});
}
}
});
</script>
I have to call a intent, but not sure how i can do this with html or js...
Dont know how to prove this: https://stackoverflow.com/questions/15325864/phonegap-android-open-play-store or this: How to Open Google Play store from Phonegap http://tannerburson.com/blog/2012/05/28/IntentChooser-my-first-PhoneGap-Cordova-plugin/
You want to use market links.
market://details?id=<package_name>
http://developer.android.com/distribute/googleplay/promote/linking.html
I am trying to provide a mask to enable user to enter ssn in the format of 999-99-9999. I tried to use the masked input plugin from digital bush. This works fine on chrome and safari but doesn't work on android.
Problem: When entering the numbers, it is fine until 123- and when I enter the next 2 digits it reverses the sequence. for ex: if I enter 123-45 it displays as 123-54 and this issue continues for each separator. For ex: if I enter 123-45-6789, it displays as 123-56-8974
I tried to write my own code as below to handle the keypress and keyup and still get the same issue. Has any one had any success with masking input on android? What is the alternative?
Here is the complete html with local links to code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> test ground</title>
<!-- JQuery specific -->
<script type="text/javascript" src="libs/jQuery/jQuery.min.js" ></script>
<script type="text/javascript" src="libs/jQuery/mobile/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="libs/jQuery/mobile/jquery.mobile.min.css" />
<script src="javascript/jquery.maskedinput-1.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Application specific -->
<script type="text/javascript">
$(document).bind('mobileinit',function(){
// $.mobile.page.prototype.options.addBackBtn = true;
// $.mobile.page.prototype.options.backBtnText = "Previous";
// $.mobile.page.prototype.options.backBtnTheme = "b";
});
$("[data-role='page']").live("pageshow", function(event) {
$("#primaryssn").mask("999-99-9999");
});
</script>
</head>
<body>
<!-- ################### PAGE: launchpage ################### -->
<div data-role="page" id="launchpage">
<div id="header" data-role="header" data-position="fixed" >
<div id="headerlogo" > </div>
<h1 class="appTitle" >My App</h1>
</div>
<div data-role="content" >
<div class="content-primary">
<p> Welcome to my app </p> <br/>
</div>
<!-- Primary SSN -->
<div data-role="none">
<label name="lblprimaryssn" for="primaryssn" > SSN</label>
<input type="text" name="primaryssn" id="primaryssn" value="" />
<span class="error" id="primaryssnerror"> Please enter your SSN as (999-99-9999) </span>
</div>
<br/>
</div><!-- /content -->
</div><!-- /launch page -->
</body>
</html>
Here is the code I used for masking input based on key stroke on keyup:
// _v is value passed in on keyup in this input field
// _d indicates if the key is a backspace to delete character
var setSSN = function (_v, _d){
var v = $.trim(_v);
if ( !_d ){
if ( v.length <= 3 ) {
var validformat1=/^\d{1,3}$/ ;
if ( validformat1.test(v)) {
if ( v.length == 3 ) v = v + '-';
return v;
}
}
else if ( v.length >3 && v.length <= 6) {
var validformat2=/^\d{3}\-\d{0,2}$/ ;
if ( validformat2.test(v)) {
if ( v.length == 6 ) v = v + '-';
return v;
}
}
else {
var validformat3=/^\d{3}\-\d{2}\-\d{0,4}$/ ;
if ( validformat3.test(v)) {
if ( v.length == 6 ) v = v + '-';
return v;
}
}
v = v.substring(0,v.length-1);
return v;
}
else {
if ( 3 == v.length || 6 == v.length ) {
v = v.substring(0,v.length-1);
}
}
return v;
}
If you just want to hide the characters as they type you could use
<input type="password">
This issue has been fixed in the masked input jquery plugin. Updating to the latest version should resolve this issue.