Solved

SmartyStreets API Implementation Error - Javascript

Posted on 2012-03-15
1
550 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 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

726 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