CODEWITHSUNDEEP
jqueryinternet-explorer
David M
David M

Reputation: 1

jQuery hide show problem on Internet Explorer

I have a page with two combos: depending on the option chosen in the first combo the second combo is displayed / hidden. This works fine on FF3.5, but not under IE8. In IE8 the second combo box briefly displays and then disappears. It's running under windows XP SP3.

<table width="100%">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            New Status
          </td>
      <td id="ForwardLabel">
            Forward to
          </td>
        </tr>  
        <tr>
          <td>
            <select id="ReviewStatusID" name="ReviewStatusID" style="width:200px;">
<option value="">-- select --</option>
<option value="5">In Progress</option>
<option value="4">Forwarded</option>
<option value="2">Pending</option>
<option value="3">Rejected</option>
<option value="1">Approved</option>
            </select> 
          </td>
          <td id="ForwardCombo">
            <select id="ForwardToMemberID" name="ForwardToMemberID" style="width:300px;">
<option value="">-- select --</option>
<option value="1">Fred Smith</option>
            </select> 
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- other table elements ommitted -->
</table>      

<script type="text/javascript">
  $(document).ready(function() {
    // hides the controls as soon as the DOM is ready
    $('#ForwardLabel').hide();
    $('#ForwardCombo').hide();
    // if the Status box is "Forwarded" then show the "Forward to" control
    $('#ReviewStatusID').change(function() {
      if ($('#ReviewStatusID').val() ==  4) {  
        $('#ForwardLabel').show(250);
        $('#ForwardCombo').show(250);
      } else {
        $('#ForwardLabel').hide(250);
        $('#ForwardCombo').hide(250);
      }
    });
  });
 </script>

Upvotes: 0

Views: 1092

Answers (3)

Tom
Tom

Reputation: 665

I have just hit exactly the same issue while back testing IE 8.

It seems to have an issue with the timer value set within the hide() or show().

I resolved my issue by replacing show(0) with show().

Upvotes: 1

David M
David M

Reputation: 1

I fixed the problem by wrapping the table elements I need to hide/show in a div i.e.

<td id="ForwardLabel">
  Forward to
</td>

becomes

<td><div id="ForwardLabel">
  Forward to
</div></td>

and that works. Thanks to all who provided assistance :)

Upvotes: 0

null_radix
null_radix

Reputation: 702

Its working for me, is there any other js being loaded on the page? Also you can try using bind and unbind instead of the change function.

Upvotes: 0

Related Questions