[jQuery] hide() does not hide span in IE, but does in FF

[msmaeda]

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="../../app/charge" 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/>&nbsp;
    </td>
    <td width="4%" rowspan="2">&nbsp;</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>