Skip to content

Commit

Permalink
Updates to support Version 3 of GetZiptastic.com API (#27)
Browse files Browse the repository at this point in the history 
* Support version 3 of GetZiptastic.com API. closes #23

- Switch to v3 payload lists
- Add Key headers
- Make API key message more noticeable.

* Update README.md
  • Loading branch information
@daspecster
daspecster committed Jun 24, 2016
1 parent 56d5fa3 commit c8bd850
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 87 deletions.
40 changes: 34 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,44 @@ Can be used to query for a specific zip code.

```js
$.ziptastic(48867, function(country, state, stateCode, city, zip) {
// Match found.
console.log(country, state, stateCode, city, zip);
});
```

#### Input Keyup Wrapper

```js
$('input.zip')
.ziptastic()
.on('zipChange', function(event, country, state, stateCode, city, zip) {
// Match found.
});
var duration = 500;

var elements = {
country: $('#country'),
state: $('#state'),
state_short: $('#state-short'),
city: $('#city'),
zip: $('#zip')
}

// Initially hide the city/state/zip
elements.country.parent().hide();
elements.state.parent().hide();
elements.state_short.parent().hide();
elements.city.parent().hide();

var options = {
"key": "<your-api-key-here>",
"country": "US"
}
elements.zip.ziptastic(options)
.on('zipChange', function(evt, country, state, state_short, city, zip) {
// Country
elements.country.val(country).parent().show(duration);

// State
elements.state_short.val(state_short).parent().show(duration);
elements.state.val(state).parent().show(duration);

// City
elements.city.val(city).parent().show(duration);
});
});
```
125 changes: 64 additions & 61 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,81 @@
<html>
<head>
<title>Zip Code Lookup Demo</title>
<style>
form label, form input {
display: block;
}
</style>
<style>
form label, form input {
display: block;
}
</style>
</head>
<body>
<form id="theform">
<label for="zip">
Zip:
<input type="text" id="zip" />
</label>
<form id="theform">
<label for="zip">
Zip:
<input type="text" id="zip" />
</label>

<label for="city">
City:
<input type="text" id="city" />
</label>
<label for="city">
City:
<input type="text" id="city" />
</label>

<label for="state">
State:
<input type="text" id="state" />
</label>
<label for="state">
State:
<input type="text" id="state" />
</label>

<label for="state-short">
State Short:
<input type="text" id="state-short" />
</label>
<label for="state-short">
State Short:
<input type="text" id="state-short" />
</label>

<label for="country">
Country:
<input type="text" id="country" />
</label>
<label for="country">
Country:
<input type="text" id="country" />
</label>

<input type="submit" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ziptastic.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
var duration = 500;
<input type="submit" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.ziptastic.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
var duration = 500;

var elements = {
country: $('#country'),
state: $('#state'),
state_short: $('#state-short'),
city: $('#city'),
zip: $('#zip')
}
var elements = {
country: $('#country'),
state: $('#state'),
state_short: $('#state-short'),
city: $('#city'),
zip: $('#zip')
}

// Initially hide the city/state/zip
elements.country.parent().hide();
elements.state.parent().hide();
elements.state_short.parent().hide();
elements.city.parent().hide();
// Initially hide the city/state/zip
elements.country.parent().hide();
elements.state.parent().hide();
elements.state_short.parent().hide();
elements.city.parent().hide();

// Initialize the ziptastic and bind to the change of zip code
elements.zip.ziptastic()
.on('zipChange', function(evt, country, state, state_short, city, zip) {
// Country
elements.country.val(country).parent().show(duration);
// Initialize the ziptastic and bind to the change of zip code
var options = {
"key": "",
"country": "US"
}
elements.zip.ziptastic(options)
.on('zipChange', function(evt, country, state, state_short, city, zip) {
// Country
elements.country.val(country).parent().show(duration);

// State
elements.state_short.val(state_short).parent().show(duration);
elements.state.val(state).parent().show(duration);
// State
elements.state_short.val(state_short).parent().show(duration);
elements.state.val(state).parent().show(duration);

// City
elements.city.val(city).parent().show(duration);

});
});
}(jQuery));
</script>
// City
elements.city.val(city).parent().show(duration);
});
});
}(jQuery));
</script>
</body>
</html>
51 changes: 31 additions & 20 deletions jquery.ziptastic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,61 @@
us: /[0-9]{5}(-[0-9]{4})?/
};

$.ziptastic = function(country, zip, callback){
// If only zip and callback are given default to US
if (arguments.length == 2 && typeof arguments[1] == 'function') {
callback = arguments[1];
zip = arguments[0];
country = 'US';
}
$.ziptastic = function(country, zip, key, callback){
country = country || 'US';
if (!key) {
alert("Please register for an API key at GetZiptastic.com.");
return;
}

country = country.toUpperCase();
// Only make unique requests
if(!requests[country]) {
requests[country] = {};
}

if(!requests[country][zip]) {
var protocol = '';
if (location.protocol == 'file:') {
protocol = 'https://';
} else {
protocol = location.protocol;
}
requests[country][zip] = $.getJSON(protocol + '//zip.getziptastic.com/v2/' + country + '/' + zip);
}

// Bind to the finished request
requests[country][zip].done(function(data) {
if (typeof callback == 'function') {
callback(data.country, data.state, data.state_short, data.city, zip);
}
});
var referrer = document.location.origin + document.location.pathname;
requests[country][zip] = $.ajax({
url: protocol + '//zip.getziptastic.com/v3/' + country + '/' + zip,
headers: {'x-referrer': referrer, 'x-key': key},
contentType: "application/json",
type: 'GET',
dataType: 'json',
success: function(data) { requests[country][zip] = data[0]; },
error: function(e) { console.log('There was an error. ' + e.message ); }
});

// Bind to the finished request
requests[country][zip].done(function(data) {

if (typeof callback == 'function') {
var data_temp = data
var key = Object.keys(data_temp)[0];

requests[country][zip] = data_temp[key];
callback(data_temp[key].country, data_temp[key].state,
data_temp[key].state_short, data_temp[key].city, zip);
}
});
}
// Allow for binding to the deferred object
return requests[country][zip];
};

$.fn.ziptastic = function( options ) {
return this.each(function() {
var ele = $(this);

ele.on('keyup change', function() {
var zip = ele.val();

// TODO Non-US zip codes?
if(zipValid.us.test(zip)) {
$.ziptastic(zip, function(country, state, state_short, city) {
$.ziptastic(options.country, zip, options.key, function(country, state, state_short, city) {
// Trigger the updated information
ele.trigger('zipChange', [country, state, state_short, city, zip]);
});
Expand Down

0 comments on commit c8bd850

Please sign in to comment.