Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

SmartyStreets API Implementation Error - Javascript

Posted on 2012-03-15
1
Medium Priority
?
568 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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

604 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