
Posted on: 8 months ago
How to import mobile contacts in JavaScript?
Contacts, Import, JavaScript, Mobile
192 | 0 | 0
We can import mobile contacts in JavaScript by using below codes.
<!-- JavaScript Code -->
<script type="text/javascript">
// phone number contact import code
function readMobileContacts() {
var navigatorAPI = (navigator.contacts || navigator.mozContacts);
if (navigatorAPI && !!navigatorAPI.select) { // Chrome API
navigatorAPI.select(['name', 'email', 'tel'], {multiple: true})
.then(function (contacts) {
//console.log('First Found ' + contacts.length + ' contacts.')
if (contacts.length) {
// console.log('First contact: ' + contacts[0].name + ', Email:' + contacts[0].email + ', Mobile:' + contacts[0].tel);
resultDisplayMethod(contacts);
}
})
.catch(function (error) {
$('.import-mobile-phone-contact-details-error-message').html(successErrorMessageShowHTML(message = 'Fetching contacts failed: ' + error.name, type = 'error'));
});
}
else if (navigatorAPI && !!navigatorAPI.find) { // Firefox OS API
var criteria = {
sortBy: 'familyName',
sortOrder: 'ascending'
};
navigatorAPI.find(criteria)
.then(function (contacts) {
// console.log('Second Found ' + contacts.length + ' contacts.');
if (contacts.length) {
// console.log('First contact: ' + contacts[0].givenName[0] + ' ' + contacts[0].familyName[0]);
resultDisplayMethod(contacts)
}
})
.catch(function (error) {
$('.import-mobile-phone-contact-details-error-message').html(successErrorMessageShowHTML(message = 'Fetching contacts failed: ' + error.name, type = 'error'));
});
}
else {
$('.import-mobile-phone-contact-details-error-message').html(successErrorMessageShowHTML(message = 'Contacts API not supported.', type = 'error'));
}
}
// display method
function resultDisplayMethod(data) {
var contactDataLogElement = document.getElementById('contactDataLog');
contactDataLogElement.innerHTML = JSON.stringify(data, null, 4) + '\n';
}
// showSuccessErrorMessage
function showSuccessErrorMessage(message, type) {
var html = '';
if(type == 'error') {
html += '<div class="alert alert-danger text-left"> <a class="close close-error cursor-pointer" data-dismiss="alert">×</a>'+message+'</div>'
}
else if(type == 'success') {
html += '<div class="alert alert-success text-left"> <a class="close close-error cursor-pointer" data-dismiss="alert">×</a>'+message+'</div>'
}
return html;
}
</script>
<!-- HTML Code -->
<div class="row common-demo-row">
<div class="col-lg-12 import-mobile-phone-contact-details-error-message">
</div>
<div class="col-lg-12 text-center">
<p>Use this on mobile</p>
<button type="button" onclick="readMobileContacts()" class="btn btn-primary community-common-button">Import contact from mobile</button>
</div>
<div class="col-lg-12">
<p id="contactDataLog" style="margin-top: 20px;"></p>
</div>
</div>
Result:
Welcome to CodePits.
CodePits provide a collection of tutorials about many programming languages like PHP, Laravel Framework, Codeigniter Framework, Mysql Database, Bootstrap Front-end Framework, Jquery, Node JS, Ajax Example, APIs, CURL Example, Composer Packages Example, AngularJS, Ionic Framework, etc. 🙌
Other Posts
Categories
Tags
Comment
Comments (0)
🤔
No comments yet, be the first to help
load more