Page 1 of 1
UK address lookup from postcode
Posted: Fri Jan 24, 2014 9:17 pm
by barrydocks
I would like to use googles api to allow address lookup based on a postcode input. I have found this code which works well:
http://jsfiddle.net/rxFBj/3/
Please could I have some advice about how to implement this in a nubulder form?
Thanks
Re: UK address lookup from postcode
Posted: Sat Jan 25, 2014 11:56 am
by massiws
barrydocs, insert the code in form >
Custom Code >
Javascript tab >
nuLoadThis() function:
Code: Select all
function nuLoadThis() {
(function($) {
...
})(jQuery);
}
You should adapt code "
address1: 'address1', address2: 'address2', ... " with your text field names.
Hope this helps,
Max
Re: UK address lookup from postcode
Posted: Sun Jan 26, 2014 9:15 pm
by barrydocks
Max thanks fo rthe help;
So I pasted the code as you directed, modified the field names and it almost works. I get a search button but it is not click-able:
Here' the code I am using:
Code: Select all
function nuLoadThis() {
(function($) {
$.fn.searchPc = function(options) {
var settings = $.extend({
address1: 'address1',
address2: 'address2',
address3: 'town',
address4: 'county'
}, options);
return this.each(function() {
var $el = $(this);
var $form = $el.closest('form');
//insert the button on the form
$('<a class="postCodeLookup">Search</a>').insertAfter($el);
$('.postCodeLookup', $form).button({icons:{primary:'ui-icon-search'}});
$form.on('click', '.postCodeLookup', function() {
$.post('http://maps.googleapis.com/maps/api/geocode/json?address='+$el.val()+'&sensor=false', function(r) {
var lat = r['results'][0]['geometry']['location']['lat'];
var lng = r['results'][0]['geometry']['location']['lng'];
$.post('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=false', function(address) {
$('input[name='+settings.address1+']').val(address['results'][0]['address_components'][0]['long_name']);
$('input[name='+settings.address2+']').val(address['results'][0]['address_components'][1]['long_name']);
$('input[name='+settings.address3+']').val(address['results'][0]['address_components'][2]['long_name']);
$('input[name='+settings.address4+']').val(address['results'][0]['address_components'][3]['long_name']);
});
});
});
});
};
})(jQuery);
$('input[name=postcode]').searchPc({
address2: 'custom_field',
});
}
I guess there's problem with the last section of code as this produces the search option??
Re: UK address lookup from postcode
Posted: Mon Jan 27, 2014 9:39 am
by massiws
barrydocks, you should adapt jQuery code with your html markup.
Try to inspect elements with Firebug:
- is there a reference to jQuery library in the
<head> section?
- maybe
'custom_field' in this code must be changed?
Code: Select all
$('input[name=postcode]').searchPc({
address2: 'custom_field',
});
- maybe, does your code require jquery-ui-1.9.2 to work (nuBuilder include jquery-ui-1.8.16)?
Max
Re: UK address lookup from postcode
Posted: Mon Jan 27, 2014 10:51 pm
by barrydocks
Max, Thanks for your reply.
is there a reference to jQuery library in the <head> section?
Not that I can see, in fact there is nothing between the <head> </head> tags
Here's the HTML for the postcode field and the search button as in the screen shot above:
Code: Select all
<input id="postcode" class="objects_caps" type="text" ondblclick="if(nuShiftKey){nuMoveObject(this.id, 0,0);return;};" onfocus="nuSetRow('');" onchange="uDB(this,'text');" style="width:160px;text-align:left;vertical-align:top;" name="postcode"></input>
<a class="postCodeLookup ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-search"></span>
<span class="ui-button-text"></span>
- maybe, does your code require jquery-ui-1.9.2 to work (nuBuilder include jquery-ui-1.8.16)?
This could be the problem. This feature is fairly core to the application I wanted to develop so if this is the case then my adventure with nuBuilder might be about to end
Re: UK address lookup from postcode
Posted: Tue Jan 28, 2014 1:17 am
by massiws
barrydocks,
I think you can adapt your code to work as you desire: you should create a
button object on your form and in
On Double Click field you can insert JavaScript to call google apis: maybe
this page can help you.
Re: UK address lookup from postcode
Posted: Tue Jan 28, 2014 11:58 am
by barrydocks
Max,
Once again thanks for your help & time.
I will try your suugestion this evening when I get home.
In the meantime, here is the original code that was converted to JOuery
http://ben-major.co.uk/2012/02/using-go ... postcodes/
I have also tried using this directly without any success which probably reflects my poor understanding of what is going on
Re: UK address lookup from postcode
Posted: Wed Jan 29, 2014 9:45 pm
by barrydocks
Max,
Thanks for your help with this, but I have given up. This is clearly beyond my very limited skillset
I have made an enquiry into the cost of professional support for this.
Re: UK address lookup from postcode
Posted: Tue Feb 18, 2014 3:25 am
by admin
.