Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

SmartyStreets API Implementation Error - Javascript

Posted on 2012-03-15
1
547 Views
Last Modified: 2012-06-27
Hi Experts,

I hoping someone can point out the problem I am having.  I am trying to implement some address verification on my site and the example supplied by the company is not working (due to user error I'm sure).  When I click the submit button nothing happens, no error nothing.   Thanks!

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="street-address.aspx.vb" Inherits="ProVal.street_address" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

		<title>Alternative LiveAddress UI</title>

		<!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

		<!-- jQuery UI -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

		<!-- jQuery Templates -->
		<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

		<script type="text/javascript">
		    $(document).ready(function () {
		        $('#verify').click(function () {
		            var givenAddress = {
		                'user_input': true,
		                'delivery_line_1': $('#street').val(),
		                'delivery_line_2': $('#street2').val(),
		                'last_line': $('#city').val() + ', ' + $('#state').val() + ' ' + $('#zip').val(),
		                'components': {
		                    'city_name': $('#city').val(),
		                    'zipcode': $('#zip').val(),
		                    'state_abbreviation': $('#state').val()
		                }
		            };
		            $.ajax({
		                url: 'https://api.qualifiedaddress.com/street-address/',
		                dataType: 'JSONP',
		                data: {
		                    'auth-token': 'xxxxxxx',
		                    'street': givenAddress.delivery_line_1,
		                    'street2': givenAddress.delivery_line_2,
		                    'city': givenAddress.components.city,
		                    'state': givenAddress.components.state_abbreviation,
		                    'zipCode': givenAddress.components.zipcode,
		                    'candidates': 4
		                },
		                success: function (data, status, xhr) {
		                    // Show the candidate addresses (along with the user input)
		                    $('#candidates').empty();
		                    data.push(givenAddress);
		                    $("#address-candidate-template").tmpl(data).appendTo("#candidates");
		                    $('#candidates').dialog({
		                        title: 'Which address is best?',
		                        autoOpen: false,
		                        show: 'clip',
		                        hide: 'clip'
		                    });
		                    $('#candidates').dialog('open');
		                }
		            });
		            return false;
		        });

		        $('.address-result').live('click', function (event) {
		            // Put the selected address data in the result div (you could do whatever you want here)
		            $('#candidates').dialog('close');
		            var raw = $(this).find('.complete-address').html();
		            var json = JSON.parse(raw);
		            var pretty = JSON.stringify(json, null, 4).replace(/ /g, '&nbsp;').replace(/\n/g, '<br />');
		            $('#results').hide().html(pretty).fadeIn('slow');
		        });
		    });
		    function verify_onclick() {

		    }

        </script>

		<!-- jQuery UI stylesheet -->
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" type="text/css" media="all" />
		<style type="text/css">
			.address-result {
				cursor: pointer;
				margin-bottom: 10px;
				padding: 5px;
			}
			.address-result:hover {
				background-color: gray;
			}
			.complete-address {
				display: none;
			}
			.title {
				color: gray;
				font-size: smaller;
				margin-bottom: 12px;
			}
		</style>
	</head>

	<body runat="server">

		<form id='address' action="street-address.aspx">
			<div>
				<label for="street">Street</label>
				<input type="text" name="street" id="street" value="3214 N University"/>
			</div>

			<div>
				<label for="street2">Street 2</label>
				<input type="text" name="street2" id="street2"/>
			</div>

			<div>
				<label for="city">City</label>
				<input type="text" name="city" id="city" value="provo"/>
			</div>

			<div>
				<label for="state">State</label>
				<input type="text" name="state" id="state" value="ut"/>
			</div>

			<div>
				<label for="zip">ZIP Code</label>
				<input type="text" name="zip" id="zip" value="84604"/>
			</div>

			<button id="verify" onclick="return verify_onclick()">Verify</button>
		</form>

		<div id="dialog" style="display:none;">
			<div id="candidates"></div>
		</div>

		<div id="results" style="display:none;"></div>

		<script type="text/x-jquery-tmpl" id="address-candidate-template">
			{{if user_input}}
			<span class="title">You provided:</span><br />
			{{else candidate_index === 0}}
			<span class="title">We suggest:</span><br />
			{{/if}}
			<div class="address-result">
				<span>${delivery_line_1}</span><br />
				<span>${last_line}</span>
				<span class="complete-address">${ JSON.stringify($item.data) }</span>
			</div>
		</script>

	</body>

</html>

Open in new window

0
Comment
Question by:rcowen00
1 Comment
 
LVL 83

Accepted Solution

by:
CodeCruiser earned 500 total points
ID: 37726702
You do not need onclick="return verify_onclick()" as its already wired using jquery ready function. What is the button tag? HTML5? Did you try with an input tag?
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question