UK address lookup from postcode

barrydocks · Unread post by **barrydocks** » Fri Jan 24, 2014 9:17 pm

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 · Unread post by **massiws** » Sat Jan 25, 2014 11:56 am

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 · Unread post by **barrydocks** » Sun Jan 26, 2014 9:15 pm

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??

massiws · Unread post by **massiws** » Mon Jan 27, 2014 9:39 am

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 · Unread post by **barrydocks** » Mon Jan 27, 2014 10:51 pm

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 · Unread post by **massiws** » Tue Jan 28, 2014 1:17 am

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 · Unread post by **barrydocks** » Tue Jan 28, 2014 11:58 am

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 · Unread post by **barrydocks** » Wed Jan 29, 2014 9:45 pm

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.

Unread post by **admin** » Tue Feb 18, 2014 3:25 am

nuBuilder Forum

UK address lookup from postcode

UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode

Re: UK address lookup from postcode