Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Re: Why won't my code run a second time on lost fo...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Why won't my code run a second time on lost focus of an element?
Subscribe
3381
1
08-18-2015 12:40 PM
08-18-2015
12:40 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
I run a block of code that runs off of lost focus. It runs fine the first time, but then I try to set focus to a textbox(which appears not to work) so I click in the textbox and tab out. The lost focus event does not work that time? Why is that?
Here is the related code:
on(document.getElementById('ownerAddress'), 'focusout', checkAddress);
on(document.getElementById('ownerAddress'), 'focusin', getElementId);
function getElementId() {
node = document.activeElement.id;
}
function checkAddress() {
console.log(node);
var locator = new Locator("http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer");
//console.log(document.getElementById('ownerAddress').value);
//node = document.getElementById('ownerAddress');
node = document.getElementById(node);
// according to your service it takes Single Line
var params = {
"Single Line Input": node.value
};
locator.addressToLocations(params).then(function (addressCandidates) {
//console.log('success', addressCandidates);
//console.log(addressCandidates.length);
data = {
identifier: "id",
items: []
};
layout = [[
// {'name': 'FID', 'field': 'id', 'width': '50px'},//
{ 'name': 'Address', 'field': 'address', 'width': '200px' }
]];
if (addressCandidates.length > 1) {
for (a = 0; a < addressCandidates.length; a++) {
// This is the address that should go into a grid cell
data.items.push(lang.mixin({ id: a + 1 }, { address: addressCandidates.address }));
console.log(addressCandidates.address);
}
console.log(addressCandidates);
items = arrayUtils.map(addressCandidates, function (result) {
console.log(result);
return result;
});
console.log(items);
}
console.log("Log" + data);
if (window.grid) {
Maingds
dojo.destroy('grid');
dijit.byId('grid').destroy(true);
registry.remove(dom.byId('gridDiv'));
}
store = new ItemFileWriteStore({ data: data });
grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
autoWidth: true,
autoHeight: false,
rowSelector: '20px'
});
// display grid
//document.getElementById("grid").style.display = "block";
//alert("hello " + addressCandidates.length);
// Show modal
if (addressCandidates.length >= 1) {
$("#myModal").modal("show");
$('#myModal').show(function () {
$(this).trigger('isVisible');
});
//registry.byId("grid").display=block;
grid.on("rowclick", onRowClickHandler);
//console.log(addressCandidates.length);
//hookup the event
$('#myModal').bind('isVisible', isVisible);
var adresses = addressCandidates.map(function () {
return x.address;
});
//console.log(adresses);
}
else
{
alert("This address does not appear to be a city address. Please try again.");
document.getElementById(node).focus();
}
}).otherwise(function (err) {
console.log('somethings wrong', err);
});
}
//declare event to run when div is visible
function isVisible() {
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
}
function onRowClickHandler(evt) {
console.log(evt);
var clickedAddress = evt.grid.getItem(evt.rowIndex).address;
console.log(clickedAddress);
alert(clickedAddress);
// console.log(evt.explicitOriginalTarget.data);
}
});
1 Reply
08-19-2015
08:28 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
What I needed to do was to evaluate the number of addresses at the beginning of my statement. Here is the resolution:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<script src="http://js.arcgis.com/3.14/"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
#gridDiv {
height: 100%;
width: 100%;
}
#myModal {
height: 100%;
width: 100%;
}
.modal-body {
height: 300px;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="claro">
<form id="frmTest">
<label id="lblOwnerAddress" for="ownerAddress">Owner's Address</label>
<input type="text" id="ownerAddress" name="ownerAddress" value="111 S Main" />
<div id="mainDiv" class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Select an Address</h4>
</div>
<div class="modal-body">
<div id="gridDiv"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
var items
require([
"dojo/on",
"dojo/_base/array",
"esri/tasks/locator",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dijit/registry", "dojo/parser",
"dijit/registry",
"dojo/dom",
"dojo/_base/lang",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (on, arrayUtils, Locator, DataGrid, ItemFileWriteStore, registry, parser, registry, dom, lang) {
parser.parse();
var store, grid, data, layout, node;
//document.getElementById("grid").style.display = "none";
on(document.getElementById('ownerAddress'), 'focusout', checkAddress);
on(document.getElementById('ownerAddress'), 'focusin', getElementId);
function getElementId() {
node = document.activeElement.id;
}
function checkAddress() {
console.log(node);
var locator = new Locator("http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer");
//console.log(document.getElementById('ownerAddress').value);
//node = document.getElementById('ownerAddress');
node = document.getElementById(node);
// according to your service it takes Single Line
var params = {
"Single Line Input": node.value
};
locator.addressToLocations(params).then(function (addressCandidates) {
//console.log('success', addressCandidates);
//console.log(addressCandidates.length);
if (addressCandidates.length >= 1) {
console.log(addressCandidates.length);
data = {
identifier: "id",
items: []
};
layout = [[
// {'name': 'FID', 'field': 'id', 'width': '50px'},//
{ 'name': 'Address', 'field': 'address', 'width': '200px' }
]];
if (addressCandidates.length > 1) {
for (a = 0; a < addressCandidates.length; a++) {
// This is the address that should go into a grid cell
data.items.push(lang.mixin({ id: a + 1 }, { address: addressCandidates.address }));
console.log(addressCandidates.address);
}
console.log(addressCandidates);
items = arrayUtils.map(addressCandidates, function (result) {
console.log(result);
return result;
});
console.log(items);
}
console.log("Log" + data);
if (window.grid) {
dojo.destroy('grid');
dijit.byId('grid').destroy(true);
registry.remove(dom.byId('gridDiv'));
}
store = new ItemFileWriteStore({ data: data });
grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
autoWidth: true,
autoHeight: false,
rowSelector: '20px'
});
// display grid
//document.getElementById("grid").style.display = "block";
alert("hello " + addressCandidates.length);
// Show modal
$("#myModal").modal("show");
$('#myModal').show(function () {
$(this).trigger('isVisible');
});
//registry.byId("grid").display=block;
grid.on("rowclick", onRowClickHandler);
//console.log(addressCandidates.length);
//hookup the event
$('#myModal').bind('isVisible', isVisible);
}
else
{
alert("This does not appear to be an address in the city of Decatur. Please try again.");
dom.byId(node).focus();
dom.byId(node).value = "";
}
var adresses = addressCandidates.map(function () {
return x.address;
});
//console.log(adresses);
})
.otherwise(function (err) {
console.log('somethings wrong', err);
});
}
//declare event to run when div is visible
function isVisible() {
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
}
function onRowClickHandler(evt) {
console.log(evt);
var clickedAddress = evt.grid.getItem(evt.rowIndex).address;
console.log(clickedAddress);
alert(clickedAddress);
// console.log(evt.explicitOriginalTarget.data);
}
});
</script>
</body>
</html>
