Chuka Charles Okoye Chuka Charles Okoye - 5 months ago 20
Javascript Question

How To Load Selected Contact Into a Text Box in a Android Native App Built with HTML5

I am building a HTML5 based Android App for SMS messaging, that is, I build the app using HTML5, CSS, JavaScript, Jquery, then an gonna use Telerik or PhoneGap to convert it to an APK.

I need to have a feature on the app that will allow users pick a contact form their phone book and have the selected contact loaded in a text box.

I have the following codes somewhere within my HTML to do the job

<input type="text" id="number">
<button id="pickContact">Phonebook</button>

var pickContact = document.getElementById('pickCntact')
pickContact.setOnClickListener(new View.OnClickListener() {
public void onClick(View g) {
Intent q = new Intent(Intent.ACTION_PICK, Contacts.CONTENT_URI);
startActivityForResult(q, 1001);


//and to handle the result (which is referenced by 1001) use this:

public void onActivityResult(int reqCode, int resultCode, Intent data) {
super.onActivityResult(reqCode, resultCode, data);

if (resultCode == Activity.RESULT_OK) {
// getting the URI from result for further working
Uri contactData = data.getData();
Cursor c = managedQuery(contactData, null, null, null, null);

if (c.moveToFirst()) {

String id =c.getString(c.getColumnIndexOrThrow(ContactsContract.Contacts._ID));

String hasPhone =c.getString(c.getColumnIndex(ContactsContract.Contacts.HAS_PHONE_NUMBER));

if (hasPhone.equalsIgnoreCase("1")) {
Cursor phones = getContentResolver().query(
ContactsContract.CommonDataKinds.Phone.CONTACT_ID +" = "+ id,
null, null);
//this string will hold the contact number
String cNumber = phones.getString(phones.getColumnIndex("data1"));
document.getElementById('number').value = cNumber;


I have also added the necessary permissions on my manifest file, thus.

<uses-permission android:name="android.permission.READ_CONTACTS" />

The problem now is that nothing happens when i click the "phonebok" button.

Please could anyone help me out. I am new in this.



I have finally found a solution and am sharing it just in case someone out there is in need of similar solution.

A was able to call-up a contact selector and instantly load the default phone number of a selected contact into my text box using a codava plugin, which is auto included on Telerik projects.

Firstly, i reference the codava within my HTML

    <script src="cordova.js"></script>

Then i have this script to call the codava's pickContact plugin when the load contact button is pressed;

    $('#myActionButton').click(function() {
        navigator.contacts.pickContact(function(contact) {
            var numberC = contact.phoneNumbers[0].value;
       }, function(err) {

More information on Codava plugins can be found at

Hope this will be useful to someone else