?
Solved

SmartyStreets API Implementation Error - Javascript

Posted on 2012-03-15
1
Medium Priority
?
562 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
[X]
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
1 Comment
 
LVL 83

Accepted Solution

by:
CodeCruiser earned 2000 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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
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…
Suggested Courses

752 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