The Java Script file
window.addEventListener('load', function() {
$(document).ready(function() {
document.addEventListener('deviceready', onDeviceReady, false);
});
}, false);
function onDeviceReady() {
var options = new ContactFindOptions();
options.multiple = true;
var fields = [ "phoneNumbers", "name", "photos","id" ];
navigator.contacts.find(fields, onSuccess, onError, options);
}
function onSuccess(contacts) {
for ( var i = 0; i < contacts.length; i++) {
var contactName = "";
var contactPhoneNo = "";
var contactImage = "";
var contactElement = $("#contacts");
var cont = contacts[i].displayName;
contactName += contacts[i].displayName;
var contactId = contacts[i].id;
for ( var j = 0; j < contacts[i].phoneNumbers.length; j++) {
contactPhoneNo += contacts[i].phoneNumbers[j].value;
}
for ( var j = 0; j < contacts[i].photos.length; j++) {
contactImage += contacts[i].photos[j].value;
}
var contactList = $('<li id="' + contactName + '" onclick="getPersonalInfo(this);" ><img src="' + contactImage + '" alt="" ><label>' + contactName + '</label><label><p style="padding-top: 10px;font-size:10px;">' + contactPhoneNo + '</p></label></li>');
contactElement.append(contactList);
$("#contacts").listview('refresh');
}
$.mobile.activePage.trigger("refresh");
}
function onError(contactError) {
alert("ERROR:" + contactError.message);
}
The HTML FILE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Contacts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="../css/jqm-icon-pack-1.1-original.css" />
<link rel="stylesheet" href="../css/style.css" />
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/jquery.mobile-1.1.1.min.js"></script>
<!-- Phonegap setup -->
<script type="text/javascript" charset="utf-8"
src="../js/cordova-1.7.0.js"></script>
<script src="../js/script.js"></script>
<script src="../js/action.js"></script>
<script src="../js/dialog.js"></script>
<script type="text/javascript">
function addNewContact() {
$.mobile.showPageLoadingMsg("a", "Loading...");
localStorage.setItem("src","../images/takephoto.png");
window.location.href = "addContact.htm";
}
</script>
</head>
<body>
<div id="home" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1 id="header">My Contacts</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="contacts" data-filter="true" >
</ul>
</div>
<div data-role="footer" data-position="fixed">
<a id="backBtn" data-icon="plus" onclick="addNewContact()">Add New Contact</a>
</div>
</div>
</body>
</html>
