I am working on an application that is using angular and must allow users to retrieve data from a USPS api for address validation/standardization and zip4 retrieval. In the parent page, I am using the window.open functionality to open the popup window...
Popup page (getAddress.php):
$value = $_GET['value']; echo('');
$url = 'http://production.shippingapis.com/ShippingAPI.dll?API=Verify&XML=';
$msg = '<AddressValidateRequest USERID="xxxxxxxx" PASSWORD="">';
$msg .= '<Address ID="0"><Address1>';
$msg .= $_GET['address1'];
$msg .= '</Address1><Address2>';
$msg .= $_GET['address2'];
$msg .= '</Address2><City>';
$msg .= $_GET['city'];
$msg .= '</City><State>';
$msg .= $_GET['state'];
$msg .= '</State><Zip5>';
$msg .= $_GET['zip'];
$msg .= '</Zip5><Zip4></Zip4></Address></AddressValidateRequest>';
//get the response from the USPS
$newurl = $url . urlencode($msg);
$xml = $newurl;
$parser = xml_parser_create();
// open a file and read data
$fp = fopen($xml, 'r');
$xmldata = fread($fp, 4096);
$xml_xmldata = new DOMDocument;
$xml_xmldata->loadXML($xmldata);
$sxe = simplexml_import_dom($xml_xmldata);
if((!$sxe->Address[0]->Error)&&(!$sxe->Address[1]))
{
$i=0;
This page works fine for retrieving the data we need. It pops up with either a matched address or an error message from the postal service if the address can't be found....
echo '<div>Address Found</div>';
echo '<div id="usps_addresses">';
foreach($sxe as $nodes){
echo '<p><span id="address1_'.$i.'">'.ucwords(strtolower($sxe->Address[$i]->Address1)).'</span><span id="address2_'.$i.'">'.ucwords(strtolower($sxe->Address[$i]->Address2));
echo '</span><span id="city_'.$i.'">'.ucwords(strtolower($sxe->Address[$i]->City)).'</span><span id="state_'.$i.'">'.$sxe->Address[$i]->State;
echo '</span><zip5 id="zip5_'.$i.'">'.$sxe->Address[$i]->Zip5.'</zip5>-<zip4 id="zip4_'.$i.'">'.$sxe->Address[$i]->Zip4.'</zip4> ';
echo '<a href="" id="'.$i.'">SELECT</a>';
echo '</p>';
$i++;
}
if($sxe->Address[0]->ReturnText){
echo $sxe->Address[0]->ReturnText;
}
}
else{
echo 'Error occurred.<br/><br/>';
echo $sxe->Address[0]->Error[0]->Description;
}
echo '</div>';
echo '</body></html>'
If the correct address is found, the user clicks the SELECT link, and the address data is placed in the parent window.... I have a click event handler for the anchor that has the following:
$(document).ready(function () {
$("a").click(function () {
var myID = this.id;
var addressType = document.getElementById("type").value;
//alert(addressType);
var myAddress1 = document.getElementById("address1_" + myID).innerHTML;
var myAddress2 = document.getElementById("address2_" + myID).innerHTML;
var myCity = document.getElementById("city_" + myID).innerHTML;
var myState = document.getElementById("state_" + myID).innerHTML;
var myZip5 = document.getElementById("zip5_" + myID).innerHTML;
var myZip4 = document.getElementById("zip4_" + myID).innerHTML;
window.opener.$("#mem-address").address.addresses[myID].zip4 = myZip4;
window.opener.$scope.address.addresses[myID].zip4 = myZip4;
window.opener.$("#Address1_"+addressType).val(myAddress1).removeClass('error');
window.opener.$("#Address2_"+addressType).val(myAddress2).removeClass('error');
window.opener.$("#City_"+addressType).val(myCity).removeClass('error');
window.opener.$("#State_"+addressType).val(myState).removeClass('error');
window.opener.$("#Zip5_"+addressType).val(myZip5).removeClass('error');
window.opener.$("#Zip4_"+addressType).val(myZip4).removeClass('error');
window.close();
})
})
But now, because I am using angular, and the elements inside the repeater cannot have id's, I am not able to get the data. I did a test and was able to get the $sxe string into localStorage, and it looks great, but I know there must be a way to access the parent elements.
HTML page:
references to jquery, angular, css...all that
<div ng-hide='foundMember'>
<button type='button' ng-click='addMember()'>Add Member</button><button type='button' ng-click='clearMember()'>Clear Member</button>
</div>
<div>
<member-lookup ></member-lookup>
<label>Edit Mode:</label>
<select ng-model='editMode'
ng-options='mode.label for mode in modes'></select>
</div>
<div class='col-md-4'>
<member-data ></member-data>
</div>
<div class='col-md-4'>
<address-data id='mem-address'></address-data>
<hr>
<phone-data></phone-data>
</div>
<div class='col-md-4'>
<email-data></email-data>
<hr>
<beneficiary-data></beneficiary-data>
</div>
</div> <!-- End of content -->
I need the data to go into a repeater inside the directive that creates the address-data tags I created.
As you can see, I attempted to add an id to the address-data tag to reference it, but I am stuck on how to get inside the functionality of the address-data.
TRIED:
$(document).ready(function () {
$("a").click(function () {
var myID = this.id;
//
var addressType = document.getElementById("type").value;
//alert(addressType);
var myAddress1 = document.getElementById("address1_" + myID).innerHTML;
var myAddress2 = document.getElementById("address2_" + myID).innerHTML;
var myCity = document.getElementById("city_" + myID).innerHTML;
var myState = document.getElementById("state_" + myID).innerHTML;
var myZip5 = document.getElementById("zip5_" + myID).innerHTML;
var myZip4 = document.getElementById("zip4_" + myID).innerHTML;
var myJSON = [{address1:myAddress1,address2:myAddress2,city:myCity,state:myState,zip5:myZip5,zip4:myZip4}];
window.opener.$("#mem-address").addresses[myID] = myJSON;
window.close();
to create an object with keys that match the directive that creates the address-data tags. But it's not working. I am a new, struggling developer and would appreciate any help.
GOAL: Users will be editing data that is pulled from the database, or creating new address records. New address records require the zip4, but I would like to allow users the option to standardize the address before persisting to the database. Thanks for your help.
