I'm trying to parse a city and country from an "Enter your location" textbox. Google Places Autocomplete is good at retrieving locations, but not every result has a country and a city (e.g. typing in "Russia" will show "Russia" as the top result, which lists no city). Whatever location the user type is saved, but the city and country portions need to be stored separately.
Is there a way to force every autocomplete result to contain both a city and a country, BUT not limit it to only those two? (e.g. typing in "Russia" would show "Moscow, Russia" or "115 X Street, Moscow, Russia", etc.)
My solution
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Place Autocomplete</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en" type="text/javascript"></script>
<script type="text/javascript">
var autocomplete;
var place;
function initialize()
{
var options = {types: ['(cities)']};
var input = document.getElementById('searchTextField');
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInPlace();
});
}
function fillInPlace() {
place = autocomplete.getPlace();
var $address = $(place['adr_address']);
$('#resultTextField').val($address.text());
}
$(document).on('ready', function(){
$("#searchTextField").on('focusout', function(e){
setTimeout(function() {
$("#searchTextField").val('');
}, 1000);
});
})
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form class='form'>
<div class="form-group">
<div class="col-xs-12">
<label for="searchTextField">City</label>
</div>
<div class="col-xs-12">
<input id="searchTextField" type="text" placeholder="Search" autocomplete="on" class='form-control pull-left' style='width:40%; margin-right:3px;'>
<input id="resultTextField" type="text" placeholder="" autocomplete="on" class='form-control pull-left' disabled='disabled' style='width:55%'>
</div>
</div>
</form>
</body>
</html>
Related
Am trying to create a CRUD operation using phonegap/cordova, and I keep receiving "Uncaught DOMException: An attempt was made to break through the security policy of the user agent. at window.onload - Line 17" pointing to =>"db = window.openDatabase("employee", "1.1", "LearnToProgram", 200000);". This further affects db.transaction Line 25 “Uncaught TypeError: Cannot read property 'transaction' of undefined”, because Database was not created. Do I need any SQLLite plugin on maybe there is something else missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>SQLLite DB App</title>
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
var db;
window.onload=function()
{
document.getElementById('btnSave').addEventListener('click', saveData);
db = window.openDatabase("employees", "1.0", "LearnToProgram", 200000);
}
function saveData(e)
{
db.transaction(saveRecord, onSuccess, onError);
}
function saveRecord(transaction)
{
var name= document.getElementById('name').value;
var email = document.getElementById('email').value;
transaction.executeSql('CREATE TABLE IF NOT EXISTS employeesList (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Email TEXT NOT NULL) ');
var sql= "INSERT INTO employeesList (Name,Email) VALUES ('" + name +"', '" + email + "')";
console.log(sql);
transaction.executeSql(sql);
}
function onSuccess()
{
console.log("Record Saved");
}
function onError(error)
{
console.log("SQL error: " + error.code);
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Database Storage</h1></div>
<div data-role="main" class="ui-content">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="text" id="email" />
<button id="btnSave" type="submit">Save</button>
<button id="showList">Show Employees</button>
</div><!-- main-->
</div><!-- page -->
</body>
</html>
maybe I help you.
To open a database:
var db = null;
document.addEventListener('deviceready', function() {
db = window.sqlitePlugin.openDatabase({
name: 'my.db',
location: 'default',
});
});
IMPORTANT: Like with the other Cordova/phonegap plugins your application must wait for the deviceready event. This is especially tricky in Angular/ngCordova/Ionic controller/factory/service callbacks which may be triggered before the deviceready event is fired.
In below ExamppleController function a value is entered into message variable local storage. For the first time value is getting stored but when entered again value is not getting stored. When browser cache is cleared then value is stored again and second time no value is getting stored.
Mystorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$rootScope,$window,$localStorage,$location) {
$scope.save = function() {
$rootScope.newq=$scope.name;
$scope.$apply();
**$localStorage.message = $scope.name;**
console.debug($localStorage.message);
$window.location.href = 'nextstorage.html';
}
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
{{data}}
</div>
</body>
</html>
NextStorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$window,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<span>{{data1}}</span>
</div>
</body>
</html>
You should really be doing things the AngularJS way. I think this is where the disconnect happens.
See the following code:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage", "ui.router"]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('1', {
url: '/1',
templateUrl: 'templates/1.html',
controller: 'FirstController'
})
.state('2', {
url: '/2',
templateUrl: 'templates/2.html',
controller: 'SecondController'
});
$urlRouterProvider.otherwise('/1');
});
example.controller("FirstController", function($scope,$localStorage,$location) {
$scope.save = function() {
$localStorage.message = $scope.name;
$location.path("/2");
}
});
example.controller("SecondController", function($scope,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ui-view></div>
<script id="templates/1.html" type="text/ng-template">
<div>
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
</div>
</script>
<script id="templates/2.html" type="text/ng-template">
<div>
<span>{{data1}}</span>
</div>
</script>
</body>
</html>
You'll notice I'm using routes and navigating between them using the $location provider. The $localStorage works fine when doing it this way.
Read up on the ui-router or ngRoute.
Regards,
I'm self-learning how to create a form, pass the responses to a separate handler, and email them to my website account. I have the form, which works, and oddly enough, I have the mail portion working. However, this example is almost straight out of some ASP.NET help pages at Microsoft - yet it does not work, and I can't seem to find out why. What's wrong and how should it read instead?
Here's some form code:
{
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="Mailform.cshtml" enctype="text/plain"
method="post" name="formcontent">
<ul>
<li>
<label for="name" class="heavyred">Contact Name:  </label>
<input type="text" name="contact" autofocus="true" size="40"
required="" /><span class="tinyfont">  red denotes a
required field</span>
<span class="italicfont"style="margin-left: 22%"><br>Person
overseeing site development</span>
</li>
<li>
<label for="strngweak">List strengths:<br></label>
<textarea name="strngweak" placeholder="420 chars max"
cols="60" rows="7"></textarea>
</li>
</ul>
<div>
<input class="hyper buttn" style="margin-right:1%; font-size: 1em;
"type="submit" value="SUBMIT">
</div>
</form>
</body>
}
handler.cshtml code: (the first two requests end up NULL instead of getting data by name)
{
#{
var contact = Request ["contact"]; <----- NULL instead of name=contact data
var stweak = Request ["strngweak"]; <----- NULL instead of name=strngweak data
var from = "info#portalmagician.com";
var to = "sirrobcop#yahoo.com";
var subject = "I WANT A WEBSITE";
var msg = "From: ";
var errorMessage = "";
var debuggingFlag = true;
msg += contact + " Strengths: " + stweak;
}
{ try-catch block initializes webmail helper and sends email here }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
#if (IsPost) {
if (errorMessage == "") {<p>Your message has been sent!</p>;}
else {<p>Unable to send due server down or bad server info.</p>;}
}
</body>
}
Modify the enctype of your form to application/x-www-form-urlencoded (or delete it).
I have a simple form in meteor which would help configure the execution of my custom application.
This form receives two arguments, Username and Password.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Execute my custom app</title>
</head>
<body>
{{> configDetails}}
</body>
<template name="configDetails">
<div class="container">
<form class="form-signin" role="form" id="form-signin" >
<div class="row">
<div class="span3 offset"><input type="textBox" class="input-block-level" placeholder="User Name" ></div>
<div class="span3 offset1"><input type="textBox" class="input-block-level" placeholder="Password" ></div>
</div>
<input class="btn btn-lg btn-primary" type="submit" style="display: block; width: 100%;" id="submit"/>
</form>
</div>
</template>
Now I want these values to be received on the server side so that I can run my external app using child_process and pass these values as arguments to the external app. How can I receive these value in the meteor server section:
if (Meteor.isServer) {
//I intend to use child_process to run my external application here
}
If the values cannot directly be received in the server section, how can I receive them in client section and pass them onto server. I am having difficulties receiving them in client section as well:
if (Meteor.isClient) {
Template.configDetails.events({
'click input': function () {
console.log( 'Submitting form!' );
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
Template.configDetails.events({
'submit form': function( event ){
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
None of the above functions execute the console.log method. Any ideas what I am doing wrong. Let me know if you need further info.
In my projets I'm using smth like this:
Template.configDetails.events({
"click #submit": function(e, t) {
e.preventDefault();
Meteor.call('someMethod', attributes, function(error, id) {
if (error) {
return console.log("Error..........");
} else {
//Do smth
}
});
});
}
});
I have a text box called txtName on my form.
In my page I know I need to place the code in my HEAD tag like so......
<script type='text/javascript' language="javascript">
document.FormName.txtName.value = "Robert";
</script>
But I cant seem to set a value to my textbox txtName with the above code......
That's because your code get executed before the DOM is created.
You can do something like this
window.onload = function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
}
or use JQuery
$(function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
// for a shorter syntax use id
$('#txtNameId').val("Robert");
}
Your script executed before page loaded. Use onload event
Can you set the id on the textbox? Then you can use getElementByID("textboxid"); Selecting by id is faster.
UPDATE:
You need to ensure that the DOM has been load so that your script can locate the element you want to update. One way is:
<body>
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
LoadTextBox();
</script>
</body>
An alternative could be where you use onload in the body tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
</script>
</head>
<body onload="LoadTextBox">
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
</body>