Today’s web applications use various services to mine data. These services provide users a better user experience when they enter information like name and zip code, into your app.
If you're building applications with Progress Rollbase, part of the Progress Pacific platform, JQuery is a service you can use as a default Javascript client side library to enhance an application for a more interactive, interesting user interface.
One way you can use JQuery to enhance your Rollbase application is to communicate with a zip code lookup service like Zippopotam.us to facilitate the input of address data fields, so when a user enters his or her zip code into the correct field, the city and state will auto-populate.
Here’s how you do it: Go to your Rollbase “Page Editor” and add a <Script Component> to the page below the fields for Zip Code, City and State.
Then, insert the following code into the Edit Script dialog:
<script>
$(function() {
// OnKeyDown function
$("#zip").keyup(function() {
var zip_in = $(this);
// validate inputs
if (zip_in.val().length<5)
{
$('#rbi_F_city').hide();
$('#rbi_F_state').hide();
}
else if ( zip_in.val().length>5)
{
$('#rbi_F_city').show();
$('#rbi_F_state').show();
}
else if ((zip_in.val().length == 5) )
{
// Make HTTP Request
$.ajax({
url: "http://api.zippopotam.us/us/" + zip_in.val(),
cache: false,
dataType: "json",
type: "GET",
success: function(result, success) {
// Make the city and state fields visible
$('#rbi_F_city').show();
$('#rbi_F_state').show();
// parse results
places = result['places'][0];
$("#city").val(places['place name']);
rbf_setPicklistCode('state', places['state abbreviation']);
},
error: function(result, success) {
console.log(‘error occurred’);
}
});
}
});
});
</script>
Now, let’s walk through the code:
1) An event handler for the field, ‘zip’ is scoped to listen on the ‘OnKeyDown’ event.
2) The length of the field’s characters is determined. If less than 5, hide the city and state fields. If greater than 5, show the city and state fields.
3) If the length = 5, call to the API, http://zpi.zippopotamus.us and pass in the zip code value.
4) If valid result, parse results and set the values into the form fields, city and state.
NOTE: Rollbase provides a helper function called rbf_setPickListCode to translate the state abbreviation to the proper pick list metadata code value.
So in summary, Rollbase provides a great development platform to extend client side functionality using standard remote APIs to provide a better user experience.
Want to learn more or try it yourself? Start a free trial now or visit progress.com/rollbase for more information.
James is a Senior Systems Engineer at Progress.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.