0

I have some HTML and JavaScript to show and hide a div based on a selection in a dropdown list.

The JavaScript looks as follows: 

$('.type-of-display-group').hide();
$('#six-graphs').show();
$('#display-type').change(function () {
    $('.type-of-display-group').hide();
    $('#' + $(this).val()).show();
});

The HTML looks as follows:

<select class="form-control" id="display-type">
    <option value="six-graphs">Six graphs</option>
    <option value="sliderFrame">Carousel</option>
</select>

<div id="six-graphs" class="type-of-display-group">
    [CODE FOR SIX GRAPHS]
</div> <!-- End six graphs display-->
<!-- The div for the carousel-->
<div id="sliderFrame" class="type-of-display-group"> 
    [CODE FOR CAROUSEL]
</div><!-- End of carousel -->

See this Fiddle to see the code in action.

So the code works in Firefox, but it does not work in IE8. What happens is that both the div's are displayed on top of each other (and I see the broken signal on the lower left corner). When I debug the script with F12 and then use the debugger the code suddenly works...

Does anyone have another way of using the show() and hide() jQuery functions so that I can use this code in IE8?

j08691
  • 204,283
  • 31
  • 260
  • 272
user2609980
  • 10,264
  • 15
  • 74
  • 143
  • 6
    I don't see this in your posted code, but it's worth mentioning that the `console` object is not present in IE8 unless the dev tools are open. Are you using `console` anywhere, by chance? – ajp15243 Jan 21 '14 at 15:50
  • 2
    *"When I debug the script with F12 and then use the debugger the code suddenly works..."* you sure you don't have any console.log()'s hidden in there somewhere? – Kevin B Jan 21 '14 at 15:50
  • 1
    `console` is available only when you are debugging otherwise it will create problem – Satpal Jan 21 '14 at 15:53
  • 1
    Funny, it seems to have to do with the version of jQuery. If I use 1.9.1 the error goes away. – j08691 Jan 21 '14 at 15:56
  • "*when using IE debugger the code suddenly works*" ... almost certainly means you've got a `console.log()` in there. Take it out. See http://stackoverflow.com/questions/7742781/why-javascript-only-works-after-opening-developer-tools-in-ie-once/7742862#7742862 – Spudley Jan 21 '14 at 15:58
  • @j08691 Interesting, so perhaps a bug with jQuery 1.10.x in IE8? – ajp15243 Jan 21 '14 at 16:02
  • @ajp15243 it was indeed the console. :D Man, took me whole afternoon. – user2609980 Jan 21 '14 at 16:14
  • @j08691 what more problems are there with he code? It was solved after removing my console.log on Document ready in one js file (it even showed up in the debugger on further inspection, I just did not know you could not do that). – user2609980 Jan 21 '14 at 16:16
  • That's strange. I have IE8 to test with and there are no console.log statements in your fiddle yet I get the behavior you described and an error until I change the jQuery version. – j08691 Jan 21 '14 at 16:20
  • @j08691 it was in another file I started in my code. I just had no idea that it could have anything to do with it and I left out the (to me) irrelevant code. – user2609980 Jan 21 '14 at 16:22
  • @j08691 I fired up my WinXP IE8 VM, and I'm not seeing any error in his fiddle (I'm appending `/show` to the URL since the JSFiddle tools don't work on IE8). I tried with and without dev tools open. – ajp15243 Jan 21 '14 at 17:31

1 Answers1

2

As ajp15243, Kevin B, satpal and Spudley kindly noticed in the comments console.log can only be used while debugging in Internet Explorer. When I removed one console.log I ran on document ready in another JavaScript file and forgot about, the code worked like a charm.

Unbelievable that this stuff took me whole afternoon.

Community
  • 1
  • 1
user2609980
  • 10,264
  • 15
  • 74
  • 143
  • moreover - console.log doesn't have to be actually USED, to cause script break under IE. Even if it exists in some IF statement which is not fulfilled, the script will break under IE. – LorDex Jan 21 '14 at 16:26