1

I'm using Smarty Street's LiveAddress jQuery plugin (2.4 branch). Sometimes the address will already be provided when the form loads. What's the best way to have a pre-loaded address verify on page load?

e.g. form:

<input id="address" value="20 N. Main St" />
<input id="city" value="Greenville" />
<input id="state" value="SC" />
<input id="zip" value="29601" />

e.g. javascript:

// set up Address Verification Service
var liveaddress = $("#DeliveryAddress").LiveAddress({
    key: "0000000000",
    autoVerify: true,
    submitVerify: false,
    invalidMessage: "Address Not Found. Click X to continue anyway.",
    addresses: [{
        id: 'DeliveryAddress',
        street: '#address',
        city: '#city',
        state: '#state',
        zipcode: '#zip'
    }]
});

So far I have tried:

liveaddress.verify( 'DeliveryAddress' );

This will indeed verify the address but not update the verify button so obviously it's not firing all the events. This is what debug mode shows:

LiveAddress API jQuery Plugin version 2.4.11 (Debug mode)
Manually mapping fields given this data: 
Finished mapping address with ID: DeliveryAddress
EVENT: FieldsMapped (Fields mapped to their respective addresses)
EVENT: VerificationInvoked (Address verification invoked)
EVENT: RequestSubmitted (Request submitted to server)
EVENT: ResponseReceived (Response received from server, but has not been inspected)
EVENT: AddressWasValid (Response indicates input address was valid)
EVENT: AddressAccepted (Address marked accepted)
EVENT: Completed (All done)
EVENT: MapInitialized (Mapped fields have been wired up to the window, document, and UI)

Actually clicking the verify button fires the same events.

Final solution from Matt's answer:

liveaddress.on("MapInitialized", function(event, data, previousHandler) {
    previousHandler(event, data);
    liveaddress.verify( 'DeliveryAddress' );
});
Community
  • 1
  • 1
Corie Slate
  • 616
  • 9
  • 19
  • Have you tried `liveaddress.verify('addressID')`? (Might want to map your fields with an `id` so you can specify that here.) – Matt May 20 '14 at 14:23
  • @Matt That has the same result as submitting each value, but is a cleaner solution. The verify button just won't update. – Corie Slate May 20 '14 at 17:46
  • After a field is populated programmatically, the `change` event needs to be raised on it. Make sure that `change` is invoked on the street field after it is populated. And also, the debug output shows that verification is happening before the map is done being initialized; make sure the map is initialized before verifying. – Matt May 20 '14 at 18:36
  • @Matt MapInitialized did it. I put the verify() in the MapInitialized event. What to put that in an answer? – Corie Slate May 20 '14 at 18:55

3 Answers3

2

Two things to check:

  1. The change event needs to be fired after the value of any field changes programmatically. Make sure the change event is invoked after populating the field

  2. It looks, from your debug output, like the verification is happening before the UI is intialized; make sure everything is finished initializing before doing verification.

Matt
  • 22,721
  • 17
  • 71
  • 112
1

I had exact same requirement and I came up with this solution, which will mark the address valid also show green tick, without making a call to SmartyStreet (since you are loading address which was already verified, so why call again?), this will also take care if customer try to change the address then it will fire the validation.

My project was in ASP.NET so I was loading following javascript based on if the address is new or existing, if new I don't load this javascript, if Exisitng I load this script.

 <% if(!NewAddress){%>

          liveaddress.on("MapInitialized", function (event, data, previousHandler) {
             var Address = liveaddress.getMappedAddressByID('billing'); 
             Address.accept();
             $("a[data-addressid='billing']").removeClass('smarty-tag-grayed').addClass('smarty-tag-green');
        previousHandler(event, data);
       });
<%}%>
user3648044
  • 11
  • 1
0

working Demo

attr used to get default value , prop used to get changed value

var get=$("#address");
    var defaulutValue=get.attr("value");  // to get default value
    var changeValue=get.prop("value");    // to get changed value
Community
  • 1
  • 1
Balachandran
  • 9,567
  • 1
  • 16
  • 26
  • The question is specifically how to get the LiveAddress plugin to properly update. I've already got the values. – Corie Slate May 20 '14 at 17:47