Welcome to the nuBuilder forums!

Please register and login to view forums and other content only available to registered users.

UK address lookup from postcode

Locked
barrydocks
Posts: 18
Joined: Wed Dec 18, 2013 4:44 pm

UK address lookup from postcode

Unread post 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
massiws
Posts: 503
Joined: Thu May 24, 2012 2:08 am
Location: Milan, Italy
Contact:

Re: UK address lookup from postcode

Unread post 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
barrydocks
Posts: 18
Joined: Wed Dec 18, 2013 4:44 pm

Re: UK address lookup from postcode

Unread post 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:
Image

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??
massiws
Posts: 503
Joined: Thu May 24, 2012 2:08 am
Location: Milan, Italy
Contact:

Re: UK address lookup from postcode

Unread post 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
barrydocks
Posts: 18
Joined: Wed Dec 18, 2013 4:44 pm

Re: UK address lookup from postcode

Unread post 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 :(
massiws
Posts: 503
Joined: Thu May 24, 2012 2:08 am
Location: Milan, Italy
Contact:

Re: UK address lookup from postcode

Unread post 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.
barrydocks
Posts: 18
Joined: Wed Dec 18, 2013 4:44 pm

Re: UK address lookup from postcode

Unread post 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 :(
barrydocks
Posts: 18
Joined: Wed Dec 18, 2013 4:44 pm

Re: UK address lookup from postcode

Unread post 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.
admin
Site Admin
Posts: 2778
Joined: Mon Jun 15, 2009 2:23 am
nuBuilder Version: 4.5

Re: UK address lookup from postcode

Unread post by admin »

.
Locked