Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

SmartyStreets API Implementation Error - Javascript

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

571 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