Develop Reference

Chrome Android 6x version input value replace duplicate value

This problem happened with my phone (Samsung Galaxy Note 4)
I am using jQuery, I am trying to code such that if a person fill (keyup jquery) value on input, text will spilt into 4 digit number
example : 123412341234 will become 1234-1234-1234
but when i test my code
example : 123412341234
it become
1234-1123-4121-2341-2312-3412-3412-3412-3411-2341-2341-2123-4123-4123-1234-1234-1234
below is my code :
$('#account_bank_number').keyup(function(e){
e.preventDefault();
var account_bank_number = $(this).val();
var account_bank_number_filter = account_bank_number.replace(/-/g, "");
var account_bank_number_new = autoSplit(5, account_bank_number_filter, '-');
$('.debug-mode').html(account_bank_number_new);
}
function autoSplit(number, string, splitChar) {
var stringLength = string.length;
var countNumber = 1;
var newString = '';
for (var i = 0; i <stringLength ; i++) {
if (countNumber == number && string.charAt(i) != splitChar) {
newString = newString+splitChar+string.charAt(i);
countNumber = 2;
continue;
}
newString = newString + string.charAt(i);
countNumber++;
};
return newString;
}
What am I doing wrong?

Hi no sure if you need this but you can do a simple :
var str = "123412341234";
str.replace(/(.{4})/g,"$1-").slice(0,-1);
$(document).ready(function(){
//uncomment if you want do it onload page
//$( "#account_bank_number" ).keyup();
});
//test on click to the input
$( "#account_bank_number" ).click(function() {
$( "#account_bank_number" ).keyup(); //this is a trigger
});
$('#account_bank_number').keyup(function(e){
e.preventDefault();
var account_bank_number = $(this).val();
var account_bank_number_filter = account_bank_number.replace(/-/g, "");//no sure you need it ...
var account_bank_number_new = account_bank_number_filter.replace(/(.{4})/g,"$1-").slice(0,-1);
$('.debug-mode').html(account_bank_number_new);
//adding the value to the input comment if you dont need
this.value = account_bank_number_new;
});
.debug-mode{background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="account_bank_number" type="text" value="1234123412341234"/>
<div class="debug-mode"></div>
Simple regex "." is the string. "{4}" is the number to cut the string every 4 characters. "$1-" is the pattern. "$1" is the new string cutting and the "-" at this end is the character being added and the slice is for deleting the last characters added by your replace function. Regards

PhoneGap : Fetch Contact list with optimize speed

In Phonegap I try to fetch the contact list from phone.I need just name and phone number , its taking around 40 seconds to fetch all the result.I add the plugin in config.xml .In my phone I have around only 400 contacts. But when I alert the length of contact in index.html it says that 1351 list.I don't know where I am wrong.I think some optimization is needed while fetching name and number from phone.
advance Thanks...:)
Config.xml
<feature name="Contacts">
<param name="android-package" value="org.apache.cordova.contacts.ContactManager" />
</feature>
index.html
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var options = new ContactFindOptions();
options.filter="";
options.multiple=true;
filter = ["displayName", "phoneNumbers"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
var cSort = function(a, b) {
aName = a.displayName ;
bName = b.displayName ;
return aName < bName ? -1 : (aName == bName ? 0 : 1);
};
function onSuccess(contacts) {
contacts = contacts.sort(cSort);
alert("length " + contacts.length );
var i =0;
for (var i = 0; i < contacts.length; i++)
{
console.log("Display Name = " + contacts[i].displayName);
if(contacts[i].displayName != null)
{
if( contacts[i].phoneNumbers == null )
continue;
else if(contacts[i].phoneNumbers.length)
{
for (var j=0; j<contacts[i].phoneNumbers.length; j++)
{
$('#contact_list').append('<li> Name:'+contacts[i].displayName+'</li>');
$('#contact_list').append('<li> Number:'+contacts[i].phoneNumbers[j].value+'</li><br><br>');
}
$('#contact_list').listview('refresh');
}
}
}
}
function onError(contactError) {
alert('onError!');
}
</script>

Change your code from:
{
for (var j=0; j<contacts[i].phoneNumbers.length; j++)
{
$('#contact_list').append('<li> Name:'+contacts[i].displayName+'</li>');
$('#contact_list').append('<li> Number:'+contacts[i].phoneNumbers[j].value+'</li><br><br>');
}
$('#contact_list').listview('refresh');
}
To:
{
var finalList = '';
listEntryPoint = $('#contact_list');
for (var j=0; j<contacts[i].phoneNumbers.length; j++)
{
finalList += '<li> Name:'+contacts[i].displayName+'</li>' + '<li> Number:'+contacts[i].phoneNumbers[j].value+'</li><br><br>';
}
listEntryPoint.append(finalList);
listEntryPoint.listview('refresh');
}

#BINIL S, you have a very expensive Jquery call:
$('#contact_list').append(...);
Change to:
listEntryPoint = $('#contact_list');
move that outside of the loop and assign it to a variable, that should help. You can also NOT insert the new entries one at at time. You CAN make the one large list before you insert into HTML. Like this,
finalList += '<li> Name:'+contacts[i].displayName+'</li>' + '<li> Number:'+contacts[i].phoneNumbers[j].value+'</li><br><br>';
After loop is done,
listEntryPoint.append(finalList);
That should help - Jesse

Swipers(Horizontal swiper) in listview(vertical scroller), not working with nested Loop Jquery Mobile

I am trying to achieve this horizontal swipers inside listview(vertical scroll) in Jquery Mobile, below i attached an example of what i meant but that is in Android. I am wondering how would i achieve this in Jquery Mobile. It is the functionality in Airbnb app - a listview that you can scroll vertically, but at the same time each list has multiple images that you can scroll horizontally.
swiping items on listview, with small vertical margin
I had an attempt to achieve it by loading the list in an ajax, and then nest the images inside another for loop and putting that into swipers. But the problem is the swiper isnt showing up, and also the layout is all messed up.
<script>
$( "#form" ).submit('pageinit',function( event ) {
$("#newContent2").empty();
var values = $(this).serialize();
console.log(values);
$.ajax({
type: "POST",
url: "http://test.com/search.php",
data: values,
dataType:'json',
success: function(data){
console.log(data);
var $el = $('#list');
var listView = new infinity.ListView($el);
for (var i=0; i<50; i++) {
var listing = data[i].listing;
var Location = data[i].Location;
var date = data[i].date;
var images = data[i].pics.split(',');
console.log(image);
for(var j = 0; j<images.length; j++){
var image3= "http://test.com/"+images;
console.log(image3);
var image2=" <div class='swiper-slide'><img class='lazy' src='"+ image3 + "' width='100%' id='viewer'/></div>"
}
var myOtherUrl = "list.html?Listingid=" + encodeURIComponent(listingid)+"?Location="+ encodeURIComponent(Location)+ encodeURIComponent(nobed+"?date="+ encodeURIComponent(date));
$.mobile.pageContainer.pagecontainer( "change", "#pageX", { foo: data[i].listingid, location:data[i].Location } );
var $newContent = "<li id='indi'><a href='" + myOtherUrl + "'>'"+ image2+ "'</a></li>"
+"<div id=two class=col-md-1 style=height:38%> <h9 class=name data-address href='"+ myOtherUrl + "'><a id="+"my-button"+">BucketListly</a>"+ "<h9 >&nbsp"+data[i].Location+ "</h9>";
$("#newContent2").append($newContent);
var listItems = listView.find('.my-items');
for(var index = 0, length = listItems.length; index < length; index++) {
listItems[index].remove();
}
var swiper = new Swiper('.swiper-container', {
loop:false,
autoResize: true,
calculateHeight:true,
onSlideChangeStart: function(){
$('.swiper-pagination-switch').removeClass('active')
$('.swiper-pagination-switch').eq(swiper.activeSlide).addClass('active')
}
});
//navigation
$('.swiper-pagination-switch').click(function(){
swiper.swipeTo($(this).index());
$('.swiper-pagination-switch').removeClass('active');
$(this).addClass('active')
})
}
}
});
return false;
});
</script>

intel XDK camera view is not working

I am creating an augmented reality application using intel XDK.When I load the this app in the "Intel App Preview" app, I see a red background and no camera view when I hold my device in vertical position. Everything else seems to work.Why dont I see the camera view ?
This is my codes
<!doctype html>
<html>
<head>
<title>Nearby</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="Copyright" content="© 2013, Intel Corporation. All rights reserved." />
<meta name="Author" content="Nadeesha" />
<!--
* Copyright (c) 2013, Intel Corporation. All rights reserved.
* Please see http://software.intel.com/html5/license/samples
* and the included README.md file for license terms and conditions.
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="lib/jquery/jquery-1.8.2.min.js"></script>
<script src="cordova.js"></script>
<script src="intelxdk.js"></script>
<script>
var pin = [
{"name":"RUSL", "lat":"8.3635595", "lng":"80.5042495"},
{"name":"Mihinthale", "lat":"8.35059440", "lng":"80.5169444"},
{"name":"Mihintale Railway Station", "lat":"8.3589425", "lng":"80.50174530"},
{"name":"Mihintale Forest Reserve", "lat":"8.3783333", "lng":"80.47916669"},
{"name":"Mihintale Wewa", "lat":"8.3613889", "lng":"80.5052777"},
{"name":"Mihintalekanda", "lat":"8.35000000", "lng":"80.500000"}
];
var markersArray = [], bounds;
var myLat = 0, myLng = 0;
var bearing, distance;
var dataStatus = 0;
// setup map and listen to deviceready
$( document ).ready(function() {
document.addEventListener("deviceready", onDeviceReady, false);
});
// start device compass, accelerometer and geolocation after deviceready
function onDeviceReady() {
navigator.splashscreen.hide();
setupMap();
// start cordova device sensors
startAccelerometer();
startCompass();
startGeolocation();
}
// start intel.xdk augmented reality mode, adds camera in background
function xdkStartAR(){
intel.xdk.display.startAR();
$('#arView').css('background-color','transparent');
$('body').css('background-color','transparent');
document.getElementById('body').style.background = "transparent";
}
// stop intel.xdk augmented reality mode
function xdkStopAR(){
intel.xdk.display.stopAR();
}
// setup google maps api
function setupMap(){
$("#map").height($(window).height()-60);
var mapOptions = {
zoom: 13,
mapTypeControl: false,
streetViewControl: false,
navigationControl: true,
scrollwheel: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
// toggle between list view and map view
function toggleView(){
if($(".listView").is(":visible")){
$(".listView").hide();
$("#map").height($(window).height()-60);
$(".mapView").fadeIn(function(){google.maps.event.trigger(map, "resize");map.fitBounds(bounds);});
$("#viewbtn").html("List");
} else {
$(".mapView").hide();
$(".listView").fadeIn();
$("#viewbtn").html("Map");
}
}
// get data from API and store in array, add to list view and create markers on map, calculate
function loadData(){
dataStatus = "loading";
markersArray = [];
bounds = new google.maps.LatLngBounds();
// add blue gps marker
var icon = new google.maps.MarkerImage('http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',new google.maps.Size(30, 28),new google.maps.Point(0,0),new google.maps.Point(9, 28));
var gpsMarker = new google.maps.Marker({position: new google.maps.LatLng(myLat, myLng), map: map, title: "My Position", icon:icon});
bounds.extend(new google.maps.LatLng(myLat, myLng));
markersArray.push(gpsMarker);
// add all location markers to map and list view and array
for(var i=0; i< pin.length; i++){
$(".listItems").append("<div class='item'>"+pin[i].name+"</div>");
addMarker(i);
relativePosition(i);
}
map.fitBounds(bounds);
google.maps.event.trigger(map, "resize");
dataStatus = "loaded";
}
// add marker to map and in array
function addMarker(i){
var marker = new google.maps.Marker({position: new google.maps.LatLng(pin[i].lat, pin[i].lng), map: map, title: pin[i].name});
bounds.extend(new google.maps.LatLng(pin[i].lat, pin[i].lng));
markersArray.push(marker);
}
// clear all markers from map and array
function clearMarkers() {
while (markersArray.length) {
markersArray.pop().setMap(null);
}
}
// calulate distance and bearing value for each of the points wrt gps lat/lng
function relativePosition(i){
var pinLat = pin[i].lat;
var pinLng = pin[i].lng;
var dLat = (myLat-pinLat)* Math.PI / 180;
var dLon = (myLng-pinLng)* Math.PI / 180;
var lat1 = pinLat * Math.PI / 180;
var lat2 = myLat * Math.PI / 180;
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
bearing = Math.atan2(y, x) * 180 / Math.PI;
bearing = bearing + 180;
pin[i]['bearing'] = bearing;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
distance = 3958.76 * c;
pin[i]['distance'] = distance;
}
// calculate direction of points and display
function calculateDirection(degree){
var detected = 0;
$("#spot").html("");
for(var i=0;i<pin.length;i++){
if(Math.abs(pin[i].bearing - degree) <= 20){
var away, fontSize, fontColor;
// varry font size based on distance from gps location
if(pin[i].distance>1500){
away = Math.round(pin[i].distance);
fontSize = "16";
fontColor = "#ccc";
} else if(pin[i].distance>500){
away = Math.round(pin[i].distance);
fontSize = "24";
fontColor = "#ddd";
} else {
away = pin[i].distance.toFixed(2);
fontSize = "30";
fontColor = "#eee";
}
$("#spot").append('<div class="name" data-id="'+i+'" style="margin-left:'+(((pin[i].bearing - degree) * 5)+50)+'px;width:'+($(window).width()-100)+'px;font-size:'+fontSize+'px;color:'+fontColor+'">'+pin[i].name+'<div class="distance">'+ away +' miles away</div></div>');
detected = 1;
} else {
if(!detected){
$("#spot").html("");
}
}
}
}
// Start watching the geolocation
function startGeolocation(){
var options = { timeout: 30000 };
watchGeoID = navigator.geolocation.watchPosition(onGeoSuccess, onGeoError, options);
}
// Stop watching the geolocation
function stopGeolocation() {
if (watchGeoID) {
navigator.geolocation.clearWatch(watchGeoID);
watchGeoID = null;
}
}
// onSuccess: Get the current location
function onGeoSuccess(position) {
document.getElementById('geolocation').innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude;
myLat = position.coords.latitude;
myLng = position.coords.longitude;
if(!dataStatus){
loadData();
}
}
// onError: Failed to get the location
function onGeoError() {
document.getElementById('log').innerHTML += "onError=.";
}
// Start watching the compass
function startCompass() {
var options = { frequency: 100 };
watchCompassID = navigator.compass.watchHeading(onCompassSuccess, onCompassError, options);
}
// Stop watching the compass
function stopCompass() {
if (watchCompassID) {
navigator.compass.clearWatch(watchCompassID);
watchCompassID = null;
}
}
// onSuccess: Get the current heading
function onCompassSuccess(heading) {
var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'];
var direction = directions[Math.abs(parseInt((heading.magneticHeading) / 45) + 0)];
document.getElementById('compass').innerHTML = heading.magneticHeading + "<br>" + direction;
document.getElementById('direction').innerHTML = direction;
var degree = heading.magneticHeading;
if($("#arView").is(":visible") && dataStatus != "loading"){
calculateDirection(degree);
}
}
// onError: Failed to get the heading
function onCompassError(compassError) {
document.getElementById('log').innerHTML += "onError=."+compassError.code;
}
// Start checking the accelerometer
function startAccelerometer() {
var options = { frequency: 100 };
watchAccelerometerID = navigator.accelerometer.watchAcceleration(onAccelerometerSuccess, onAccelerometerError, options);
}
// Stop checking the accelerometer
function stopAccelerometer() {
if (watchAccelerometerID) {
navigator.accelerometer.clearWatch(watchAccelerometerID);
watchAccelerometerID = null;
}
}
// onSuccess: Get current accelerometer values
function onAccelerometerSuccess(acceleration) {
// for debug purpose to print out accelerometer values
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z ;
if(acceleration.y > 7){
$("#arView").fadeIn();
$("#topView").hide();
document.getElementById('body').style.background = "#d22";
} else {
$("#arView").hide();
$("#topView").fadeIn();
document.getElementById('body').style.background = "#fff";
}
}
// onError: Failed to get the acceleration
function onAccelerometerError() {
document.getElementById('log').innerHTML += "onError.";
}
</script>
<style>
body {background-color:#fff;font-family:Arial;margin:0;overflow-x:hidden;-webkit-user-select: none;}
.navbar {background-color:#222;height:40px;padding:10px;text-align:center;color:#fff;font-size:20px;font-weight:bold;line-height:40px;}
.navtitle {text-align:center;margin:auto}
.navbtn {background-color:#333;padding:5px 10px;height:30px;color:#fff;font-size:18px;font-weight:bold;line-height:30px;border-radius:4px;border:1px solid #666}
#actionbtn {float:right;}
#viewbtn {float:left;}
.query {padding:10px;background-color:#aaa;border-bottom:1px solid #fff;font-size:14px;font-weight:bold;color:#222;}
.item {padding:20px 10px; background-color:#eee;border-bottom:1px solid #fff;font-size:18px;color:#333;text-shadow:0 1px #fff}
.searchbox {padding:5px;background-color:#eee;border-bottom:1px solid #fff;}
#search {box-sizing: border-box;width:100%;height:40px;font-size:16px;border-radius:20px;border:1px solid #bbb}
.mapView {display:none}
#map {height:200px;}
#arView, #topView {display:none;}
#arView{padding:30px 0; height:70px;text-align:center}
.arMessage {color:#ddd;font-size:14px}
#spot {text-align:center}
.name, .distance {text-shadow:0 1px #666}
.name {padding:15px;font-weight:bold;;background-color:#c22;border-radius:40px;margin-bottom:10px}
#direction {color:#d55;font-size:20px;padding:15px;font-weight:bold;;background-color:#a22;border-radius:40px;display:inline-block;margin-bottom:10px;width:40px;line-height:40px}
.distance {font-size:14px;font-weight:normal;}
#debug {border:1px solid #999;display:none}
.heading {background-color:#999;color:#eee;padding:5px;}
#compass, #accelerometer, #geolocation {padding:5px}
</style>
</head>
<body id="body">
<div id="arView">
<div class="arMessage">↑<br>Tilt down to see all places</div>
<br>
<div class="arMessage">← Move the device around to find spots →</div>
<br>
<div id="direction"></div>
<br>
<div id="spot"></div>
</div>
<div id="topView">
<div class="navbar">
<div id="actionbtn" class="navbtn"> ↵ </div>
<div id="viewbtn" class="navbtn" onclick="toggleView()">Map</div>
<div class="navtitle">Nearby</div>
</div>
<div class="listView">
<div class="listItems"></div>
</div>
<div class="mapView">
<div id="map"></div>
</div>
</div>
<div id="debug">
<div class="heading">Geolocation</div>
<div id="geolocation"></div>
<div class="heading">Compass</div>
<div id="compass"></div>
<div class="heading">Accelerometer</div>
<div id="accelerometer"></div>
<div class="heading">Log</div>
<div id="log"></div>
</div>
</body>
</html>

You are not calling xdkStartAR() and xdkStopAR() in function onAccelerometerSuccess so the camera is not initiating.
Here is the correct onAccelerometerSuccess:
function onAccelerometerSuccess(acceleration) {
// for debug purpose to print out accelerometer values
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z ;
if(acceleration.y > 7){
$("#arView").fadeIn();
$("#topView").hide();
document.getElementById('body').style.background = "#d22";
xdkStartAR();
} else {
$("#arView").hide();
$("#topView").fadeIn();
document.getElementById('body').style.background = "#fff";
xdkStopAR();
}
}
Also I had to include intelxdk.js first and then cordova.js to get it to work in app preview:
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>

HTML5 Find nearby geolocation

I am creating an application and I need the app to find the nearest car rentals from the user location or if they input in a postcode. Currently i have looked into previous posts on stack overflow and found the below which finds the users current location. I am new to this so apologies in advance but I am not sure on how I would go from here to make the data display.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Geolocation</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
// Integration with google maps
function loadMap(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
var settings = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), settings);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Your Position!'
});
document.getElementById('status').innerHTML = 'Position Found!';
}
// Initialize geolocation
function initialize() {
if (navigator.geolocation) {
document.getElementById('status').innerHTML = 'Checking...';
navigator.geolocation.getCurrentPosition(
onSuccess,
onError, {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 120000
});
}
else {
document.getElementById('status').innerHTML = 'Geolocation not supported.';
}
}
// Map position retrieved successfully
function onSuccess(position) {
var data = '';
data += 'latitude: ' + position.coords.latitude + '<br/>';
data += 'longitude: ' + position.coords.longitude + '<br/>';
data += 'altitude: ' + position.coords.altitude + '<br/>';
data += 'accuracy: ' + position.coords.accuracy + '<br/>';
data += 'altitudeAccuracy: ' + position.coords.altitudeAccuracy + '<br/>';
data += 'heading: ' + position.coords.heading + '<br/>';
data += 'speed: ' + position.coords.speed + '<br/>';
document.getElementById('data').innerHTML = data;
loadMap(position.coords.latitude, position.coords.longitude);
}
// Error handler
function onError(err) {
var message;
switch (err.code) {
case 0:
message = 'Unknown error: ' + err.message;
break;
case 1:
message = 'You denied permission to retrieve a position.';
break;
case 2:
message = 'The browser was unable to determine a position: ' + error.message;
break;
case 3:
message = 'The browser timed out before retrieving the position.';
break;
}
document.getElementById('status').innerHTML = message;
}
</script>
</head>
<body onload="initialize()">
<div id="status"></div>
<div id="data"></div>
<div id="map_canvas" style="width: 640px; height: 480px"></div>
</body>
</html>
How would i get the app to display a list of nearest car rentals when the user selects current location or inputs their postcode?
Thank you.

If you are going to be building a database of car rental locations, MongoDB has built-in geolocation / geospatial query capabilities. In a general sense, it sounds like you need to buy or rent a list of the agencies, get that into a database format, then query that database with geo queries in your html.