ansaurus

Question

jQuery hide() does not work as expected on IE 8

Answer 1

A:

I haven't seen your HTML, but the way you've named and referenced your IDs above suggests that you may be using the same ID more than once. Just a guess.

Ken Redler 2010-06-23 17:19:01

The IDs sure look unique to me. What about his code suggests otherwise?

patrick dw 2010-06-23 17:26:37

Answer 2

A:

Have you tried validating your HTML document? Don't know if this works, but one more way...

PeterWong 2010-06-24 02:54:42

Answer 3

A:

What happens if you add a class to all the DIVs you're showing and hiding, and then use this slightly rephrased code? In this example, you'd add "classofalldivs" as a class to those divs you want to affect:

  (function($){
    $('#rule_rule_type').change(function() {
      var id = $(this).val();
      $('#' + id).show();
      $('.classofalldivs:not(' + '#' + id+ ')').hide();
    });
  })(jQuery);

This uses the "not" pseudo-selector to hide everything but the div you're showing, and stands a chance of working in both IE and FF.

Having said that, I'd agree with the other suggestions that your original code doesn't seem to look wrong, so there may be other strange things going on. Can you post a complete and full example of your problem so others can reproduce it?

Matt Gibson 2010-06-29 14:05:32

Answer 4

+1 A:

I'm running your sample just fine in IE8 and Chrome. Is it different in some way?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Sandbox</title>
</head>
<body>

    <select id='rule_rule_type'>
        <option value="allowed_senders">allowed_senders</option>
        <option value="blocked_senders">blocked_senders</option>
        <option value="blocked_character_set">blocked_character_set</option>
        <option value="custom">custom</option>
    </select>

    <hr />

    <div id="allowed_senders">#allowed_senders</div>
    <div id="blocked_senders">#blocked_senders</div>
    <div id="blocked_character_set">#blocked_character_set</div>
    <div id="custom">#custom</div>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">

        $(function () {

            $('#rule_rule_type').change(function () {

                $('#allowed_senders, #blocked_senders, #blocked_character_set, #custom').hide();

                var id = $(this).val();
                $('#' + id).show();

            });

        });

    </script>
</body>
</html>

AndrewDotHay 2010-06-29 22:58:16

ansaurus

tags:

views:

answers:

jQuery hide() does not work as expected on IE 8

related questions