this is a lot to sift through to find one span hide issue for which
there is likely an easy solution. You'll get a lot better response by
putting a test case on live link.
jsbin.com is great for this if you don't have public access server
msmaeda wrote:
Hi,
With the code below, I am having an issue that only seems to occur in
IE. The issue is that the "payer_pane" span should be hidden unless
the "NEW" option is selected in the "relationship_person_id" select
list. In IE, the payer_pane appears despite what is selected in the
"relationship_person_id" select list. In Firefox and Safari, the span
hides and appears as expected.
Thanks in advance for any help on this.
Kind Regards,
Matt
********************************** JS
**********************************
// this will need tweaking when we add multiple token types, but is
hard coded for now so we're aware of it.
var current_person_id;
var current_gateway_id;
$('document').ready(function() {
utilSetTextfieldHint( $('#relationship_name'), 'Enter new
relationship here' );
$('#relationship_name').hide();
// set up account reference and display rules
utilSetTextfieldHint( $('#new_account_reference'), 'Enter new
account reference here' );
if ( $('#account_reference') ) {
$('#new_account_reference').hide();
$('#account_reference').change(function() {
if ($(this).val() !=0 ) {
$('#new_account_reference').hide();
}
else {
$('#new_account_reference').show();
}
});
}
// populate payer information on select
$('#relationship_person_id').change(function() {
var person_id = $(this).val();
// existing person
if (person_id>0) {
$('#relationship_name').hide();
load_payer(person_id);
}
// new person
else {
$('#relationship_name').show();
populate_payer_person();
populate_payment_token();
}
if ( person_id == $('input[name=person_id]').val() ) {
$('#payer_pane').hide();
}
else {
$('#payer_pane').show();
}
});
$('#payer_pane').hide();
});
function populate_payer_person(data) {
if (!data) {
data=""
}
if (data.error) {
if ( confirm("Error: "+data.error+" - Retry?") ) {
load_payer(current_person_id);
}
}
else {
$('input[name=payer_person_id]').val(data.id||'');
$('input[name=payer_person_first_name]').val(data.first_name||'');
$('input[name=payer_person_middle_name]').val(data.middle_name||'');
$('input[name=payer_person_last_name]').val(data.last_name||'');
$('input[name=payer_person_address1]').val(data.address1||'');
$('input[name=payer_person_address2]').val(data.address2||'');
$('input[name=payer_person_city]').val(data.city||'');
$('input[name=payer_person_state]').val(data.state||'');
$('input[name=payer_person_zip]').val(data.zip||'');
$('input[name=payer_person_zipplus4]').val(data.zipplus4||'');
$('input[name=payer_person_phone1_number]').val
(data.phone1_number||'');
$('select[name=payer_person_phone1_description]').val
(data.phone1_description||'');
$('input[name=payer_person_phone2_number]').val
(data.phone2_number||'');
$('select[name=payer_person_phone2_description]').val
(data.phone2_description||'');
}
}
function load_payer(person_id) {
// grab payer info from server through ajax and populate into form
current_person_id = person_id;
populate_payer_person({ first_name: 'Loading...'});
$.getJSON(
'../../app/charge',
{ m: 'ajax_person',
person_id: person_id },
function(data) { populate_payer_person(data) }
);
}
********************************** HTML
**********************************
<h1>Account Info</h1>
<form action="" method="post" id="cc_form">
<input name="m" value="select_credit_card" type="hidden"/>
<table>
<tr valign="top">
<td width="48%">
Account Number<br/>
....<br/>
Client/Directory Location<br/>
....<br/>
</td>
<td width="4%" rowspan="2"> </td>
<td width="48%">
Payer's relationship to the Account Holder<br/>
<select style="width: 200px;" class="input1"
id="relationship_person_id" name="relationship_person_id">
<option value="3">SELF</option>
<option value="0">NEW</option>
</select><br/>
<input style="display: none;" id="relationship_name"
name="relationship_name" size="30" maxlength="30" class="input1
grayed" type="text">
</td>
</tr>
<tr valign="top">
<td style="background-color: #d9d9db;padding: 4px;">
<b>Account Holder</b><br/>
...
</td>
<td>
<span id="payer_pane">
<b>Payer Information</b><br/>
<table>
...
</table>
</span>
</td>
</tr>
<tr>
<td colspan="3" align="right"><br/><input class="button1"
type="submit" id="submit_transaction" value="Next"/><br/><br/><br/></
td>
</tr>
</table>
</form>
|
