UK address lookup from postcode

UK address lookup from postcode

Postby barrydocks » Sat Jan 25, 2014 5:47 am

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
barrydocks
 
Posts: 18
Joined: Thu Dec 19, 2013 1:14 am

Re: UK address lookup from postcode

Postby massiws » Sat Jan 25, 2014 8:26 pm

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
massiws
 
Posts: 503
Joined: Thu May 24, 2012 9:38 am
Location: Milan, Italy

Re: UK address lookup from postcode

Postby barrydocks » Mon Jan 27, 2014 5:45 am

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??
barrydocks
 
Posts: 18
Joined: Thu Dec 19, 2013 1:14 am

Re: UK address lookup from postcode

Postby massiws » Mon Jan 27, 2014 6:09 pm

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
massiws
 
Posts: 503
Joined: Thu May 24, 2012 9:38 am
Location: Milan, Italy

Re: UK address lookup from postcode

Postby barrydocks » Tue Jan 28, 2014 7:21 am

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 :(
barrydocks
 
Posts: 18
Joined: Thu Dec 19, 2013 1:14 am

Re: UK address lookup from postcode

Postby massiws » Tue Jan 28, 2014 9:47 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.
massiws
 
Posts: 503
Joined: Thu May 24, 2012 9:38 am
Location: Milan, Italy

Re: UK address lookup from postcode

Postby barrydocks » Tue Jan 28, 2014 8:28 pm

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-google-maps-to-lookup-uk-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: Thu Dec 19, 2013 1:14 am

Re: UK address lookup from postcode

Postby barrydocks » Thu Jan 30, 2014 6:15 am

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.
barrydocks
 
Posts: 18
Joined: Thu Dec 19, 2013 1:14 am

Re: UK address lookup from postcode

Postby admin » Tue Feb 18, 2014 11:55 am

.
admin
Site Admin
 
Posts: 3139
Joined: Mon Jun 15, 2009 9:53 am


Return to Custom Code