Welcome to the nuBuilder forums!
Please register and login to view forums and other content only available to registered users.
Please register and login to view forums and other content only available to registered users.
UK address lookup from postcode
-
- Posts: 18
- Joined: Wed Dec 18, 2013 4:44 pm
UK address lookup from postcode
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
http://jsfiddle.net/rxFBj/3/
Please could I have some advice about how to implement this in a nubulder form?
Thanks
-
- Posts: 503
- Joined: Thu May 24, 2012 2:08 am
- Location: Milan, Italy
- Contact:
Re: UK address lookup from postcode
barrydocs, insert the code in form > Custom Code > Javascript tab > nuLoadThis() function:
You should adapt code "address1: 'address1', address2: 'address2', ... " with your text field names.
Hope this helps,
Max
Code: Select all
function nuLoadThis() {
(function($) {
...
})(jQuery);
}
Hope this helps,
Max
-
- Posts: 18
- Joined: Wed Dec 18, 2013 4:44 pm
Re: UK address lookup from postcode
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:
![Image](http://i887.photobucket.com/albums/ac73/barrydocks/Screenshotfrom2014-01-26201017_zps555d087a.png)
Here' the code I am using:
I guess there's problem with the last section of code as this produces the search option??
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:
![Image](http://i887.photobucket.com/albums/ac73/barrydocks/Screenshotfrom2014-01-26201017_zps555d087a.png)
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',
});
}
-
- Posts: 503
- Joined: Thu May 24, 2012 2:08 am
- Location: Milan, Italy
- Contact:
Re: UK address lookup from postcode
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?
- maybe, does your code require jquery-ui-1.9.2 to work (nuBuilder include jquery-ui-1.8.16)?
Max
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',
});
Max
-
- Posts: 18
- Joined: Wed Dec 18, 2013 4:44 pm
Re: UK address lookup from postcode
Max, Thanks for your reply.
Here's the HTML for the postcode field and the search button as in the screen shot above:
![Sad :(](./images/smilies/icon_e_sad.gif)
Not that I can see, in fact there is nothing between the <head> </head> tagsis there a reference to jQuery library in the <head> section?
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>
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- maybe, does your code require jquery-ui-1.9.2 to work (nuBuilder include jquery-ui-1.8.16)?
![Sad :(](./images/smilies/icon_e_sad.gif)
-
- Posts: 503
- Joined: Thu May 24, 2012 2:08 am
- Location: Milan, Italy
- Contact:
Re: UK address lookup from postcode
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.
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.
-
- Posts: 18
- Joined: Wed Dec 18, 2013 4:44 pm
Re: UK address lookup from postcode
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![Sad :(](./images/smilies/icon_e_sad.gif)
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
![Sad :(](./images/smilies/icon_e_sad.gif)
-
- Posts: 18
- Joined: Wed Dec 18, 2013 4:44 pm
Re: UK address lookup from postcode
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.
Thanks for your help with this, but I have given up. This is clearly beyond my very limited skillset
![Sad :(](./images/smilies/icon_e_sad.gif)
I have made an enquiry into the cost of professional support for this.