AJAX ASP.NET Full Address Lookup

[Classic ASP Version] [PHP Version]

Tutorial Video : Show to add Full Address Inline AJAX List

(Sound Required)

[View Demo of Web Pop-up for Web Applications]

The above functionality can be installed in minutes....in 7 easy steps.....

The above Postcode Lookup for full Address search functionality can be added to a ASP.NET capable web site in minutes, by simply dropping the supplied files into your Web project.

Advantages

Uses AJAX to populate web page, for a smooth customer experience
"Out of the box" Full Postcode Address Search solution
Give almost total control of style
Your Simply Postcode Lookup account codes are hidden from client
Very little programming required
Quick to install, Simply copy three files in to your Web site
Will run on most Microsoft Web servers
Not blocked by Pop-up blockers
No Data Administration Cost for you

[More information on AJAX]

[More information on AJAX Programming]

[How does it work?]

Requirements

Web server capable of running ASP.NET code.

Does NOT require Microsoft Version of AJAX to be loaded

[PHP Version of this functionality]

Step1: Download the Example Code

Simply download the example code. The code is in the "AJAX ASP NET Full Address" directory of our example downloads. Then copy, into the same directory as your web page which requires Address Lookup, "SPL_AJAX_Full.js", "SPLGetFullAddress1.aspx" and "SPLGetFullAddress2.aspx" files.

[Click here to download the Examples]

Step 2 : Add reference to our JavaScript file to your page

Then on your own web page header, add the following reference to the JavaScript file your copied.

This line is show in the "index.html" file included in the example download, as is the rest of the code.

Referance the JavaScript file

Step 3 : Add a Link, button or image to activate Postcode Lookup

Then add either a link, using the following code to activate the Postcode Lookup Web address selection list:

Example link to activate Postcode Lookup Window:

>Lookup Address from link</a>

Example Button to activate Postcode Lookup Window:

<input type=button value="Lookup Address"

onClick= "javascript:SPLGetAddressData(document.getElementById('postcode').value)">

This could easily be changed to use a image button.

Note: In the above example the Postcode Text field must have an ID of "postcode"

Step 4 : Copy Style for Text

When the inline selection box is shown for the user to select the address, the following style statements should be added to the header of the page to control the size of the selection box and the text which appear below it.

Customise combo/text style

<STYLE type="text/css">
.SPLAddressListSt{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

margin-top: 0;

   margin-bottom: 0;
   width: 80mm;}
.SPLAddressListStBottomLine{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   text-align: center;
   margin-top: 0;
   margin-bottom: 0;
}
.SPLAddressListStErrorLine{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-align: center;
   margin-top: 0;
   margin-bottom: 0;
}
.SPLAddressListLicenseLine{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   text-align: center
   margin-top: 0;
   margin-bottom: 0;
}
</STYLE>

where:

SPLAddressListSt is the style of the address selection box

SPLAddressListStBottomLine is the style of the line below selection box

SPLAddressListStErrorLine is the style of text which appears if Postcode is not found

SPLAddressListLicenseLine is the style for the License information. This is only shown if using "Internal License" to show number of Users, etc

Of course the above style code can be placed in your own style sheet.

Step 5 : Place DIV tag where Inline Combo Box should appear

The inline address selection list is shown where you define the SPLSearchArea DIV tag. Basically our Postcode Lookup Server provides the HTML to display the list box in the DIV tag, which is populated by the AJAX call.

Combo placement

<tr>

<td>

</td>

</tr>

In this case in a two column table

Step 6 : Map your Address fields

Now edit the JavaScript at the end of file "SPL_AJAX_Full.js", to write the correct address lines, which result from the Postcode Address Lookup function, back to your target web page fields:

Example address field mappings:
document.getElementById("postcode").value=POSTCODE;
document.getElementById("line1").value=LINE1;
document.getElementById("line2").value=LINE2;
document.getElementById("line3").value=LINE3;
document.getElementById("town").value=TOWN;
document.getElementById("county").value=COUNTY;
document.getElementById("country").value=COUNTRY;
document.getElementById("company").value=COMP;

The example code also shows how to write the address information back to a "Memo" type field.

The UK Address data returned by the call is similar to our Postcode XML Web service. The full address record is:

      <organisation>Comtek</organisation>
      <line1>44 Victoria Road</line1>
      <line2></line2>
      <line3></line3>
      <town>Wisbech</town>
      <county>Cambridgeshire</county>
      <postcode>PE13 2QL</postcode>
      <country>England</country>
      <deliverypointsuffix>2N</deliverypointsuffix>
      <nohouseholds>1</nohouseholds>
      <smallorg>N</smallorg>
      <pobox></pobox>
      <rawpostcode>PE132QL</rawpostcode>

Fields of interest:

Name	Description
id	Is only used for our internal use
deliverypointsuffix	This code can be added to the postcode to give a unique reference to each Delivery Point (letterbox) in a Postcode. Although the UDPRN number is a better source of unique ID.
nohouseholds	Number of house holds at this postcode address
smallorg	Y = Small Organisation
pobox	PO Box number if PO Box address
rawpostcode	Postcode in its raw state. 7 chars long
mailsortcode	The Royal Mail offer discount if mail is sorted by this code
udprn	is a unique 8 digit code assigned to each addressable property (Delivery Point).
unique	gives the unique portion of the address record, in the above example "44".
spare	This is for future use. It will contain "\|" separated data

Step 7 : Specify the Data Key

Open an account with us. Within seconds you will then receive a data key, by e-mail, which should be put in "SPLGetFullAddress1.aspx" and "SPLGetFullAddress2.aspx" files. This key will enable your account, for a 30 day evaluation period, for one postcode area.

Identify your account:

Dim DataKey$ = "PUT YOUR DATA KEY HERE"

[Open your account]

Enter Postcode "ZZ99" to use test data

Optional customisation

The text below the selection box can be changed by editing the following line in the "SPLGetFullAddress1.aspx" file:

Change text (line 74):

XMLService += "&text=Please%20Select%20Address"

set to

XMLService += ""

to suppress text

Number of Lines in Combo Box:

To change the number of lines in the selection box edit line 73

XMLService += "&lines=8"

Show License information (for Internal Use):

Set to showlic=1 to show License status:
XMLService += "&showlic=1"

How it Works

When the customer presses the [Find] button, then the function SPLGetAddressData is called, passing the Postcode entered in your Postcode field. This then calls the SPLGetFullAddress1.aspx page with the Postcode in the parameters, using the xmlHttp object created when the page was opened on the browser. This xmlHttp object provides AJAX (Asynchronous JavaScript and XML) to perform a Asynchronous call the SPLGetFullAddress1.aspx page, without a complete page refresh.

The SPLGetFullAddress1.aspx code on your web server then calls our Postcode lookup web server for the address information, adding your account information, etc. This means the client browser never sees your account information.

When the SPLGetFullAddress1.aspx page receives address information from our Postcode lookup server it simply relays it back to the web page (your page with address fields on the customers computer) on the client computer.

The result of SPLGetFullAddress1.aspx is then handled by the JavaScript function SPLhandleRequestStateChange which calls SPLhandleServerResponse when fully complete.

Function SPLhandleServerResponse then reads the XML, if it DOES NOT contain tag "<line1>" then it writes the response to the DIV SPLSearchArea on your web page. The response contains all the HTML to display the selection list, thus the list appears on your web page on the client computer, in the DIV tag.

When the user clicks on an address line then the function SPLAddressChange gets called, with the ID of the line selected. This function then calls SPLGetFullAddress2.aspx and writes nothing to the DIV tag SPLSearchArea to hide the address selection list.

The web page SPLGetFullAddress2.aspx on your server then again relays the address information from our Postcode address lookup server to the client page on the customers computer.

Function SPLhandleServerResponse then reads the XML returned, if it DOES contain tag "<line1>" then it writes the address information to your address fields on your web page. Thus the address has been written to your web page.

Why do you have to have extra pages on your server?

Reason 1

Some browsers, especially if the client has turned up the security settings, may stop the client web page talking to a server from different domain. So by adding a page into your web domain, to relay the query to our Postcode address lookup server, removes this security problem.

Reason 2

Hides your account information from the Client Web Browser

[More information on AJAX]

[More information on AJAX Programming]

This example could easily be converted to any other server side language, since the .NET pages are simply used to relay XML data from our server. The clients side JavaScript would remain the same.

Internet Postcode Address Lookup Software

PAF Postcode Address Lookup Software for Web Sites

PAF Postcode Address Lookup Software using .NET and SOAP Services

COM Object for PAF Postcode Address Lookup Software

PAF Postcode Address Lookup Software Desktop Application Manual

PAF Postcode Address Lookup using HTTP to request XML data

PAF Postcode Address Lookup Software Troubleshooting

PAF Postcode Address Lookup Software WEB Troubleshooting

Terms and Conditions

Home Page