1

I am trying to build a simple webpage that replaces the contents of the <div id="body"> with something new based on the user clicking on a "link"

The following code does exactly what I expect in Chrome and Firefox, but does nothing (except turn the link to the visited color) in IE 10 or 11:

<!DOCTYPE html>

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
             $("#activities").click(function(){
                 $("#body").load("test02.html");
             });
        });
    </script>
</head>
<body>
    <div id="header">
        <a href="#" id="activities">Activities</a>
        <!-- this stays the same -->
    </div>
    <div id="body">
        <p>this is the content that arrives without needing prompting</p> 
        <!-- All content will be loaded here dynamically -->

    </div>
    <div id="footer">
        <!-- this stays the same -->
    </div>
</body>
</html>

This is the content of "test02.html":

<p>---</p>
<p>Hello world!</p>
<p>---</p>

I've checked the javascript security settings in IE and everything is set to "enable." I've also tried adding type="text/javascript" to the script tags.

Some amount of Googling has turned up the possible need to reinstall IE, which I have tried.

Anyone have an idea about how to get this working in IE?

gagan mahatma
  • 336
  • 2
  • 9
JohnCroc
  • 79
  • 1
  • 9
  • 2
    Any error in IE's console? – Jeremy Thille Jan 08 '16 at 17:00
  • I should have mentioned that this is being served up by my own IIS server running on another machine on my network. – JohnCroc Jan 08 '16 at 17:03
  • 1
    No errors in the IE console – JohnCroc Jan 08 '16 at 17:03
  • 1
    @JohnCroc: **I** get errors in the IE console, complaining that `addEventListener` isn't there. That's because on intranets, IE has a *massively stupid default setting* that tells it to hobble itself and pretend to be something that doesn't support standards. You're not getting that?? – T.J. Crowder Jan 08 '16 at 17:07
  • What version of IE are you using? It may be a jQuery compatibility thing [https://jquery.com/browser-support/](https://jquery.com/browser-support/) – neilsimp1 Jan 08 '16 at 17:09
  • @neilsimp1: *"in IE 10 or 11"* – T.J. Crowder Jan 08 '16 at 17:10
  • @T.J. Crowder: No. If I open the console and click on the "Activities" link the console remains blank. – JohnCroc Jan 08 '16 at 17:11
  • @T.J. Crowder: You've marked my question as a duplicate. I spent 20 minutes searching StackOverflow for an answer to this question before posting it. Would you mind sharing your search terms so I can see the question and answer to which mine is a duplicate? Oops. Nevermind...I see it. – JohnCroc Jan 08 '16 at 17:13
  • @T.J.Crowder: I object to the characterization of this question as a duplicate on the following grounds: Nothing in the referenced question affects a solution to the stated problem (I've tried adding the force-compatibility tag and I still have the same problem I've described) – JohnCroc Jan 08 '16 at 17:23
  • @JohnCroc: I reversed that several minutes ago. But: "Duplicate" isn't a pejorative. It doesn't (necessarily) imply your search skills weren't up to snuff. The standard on SO for whether a question is a duplicate is whether an **answer** to the other question is an answer to this question as well. Duplicates can be a good thing -- they make it easier for people to find the answer. I reversed it because I did a test and (mistakenly) thought that wasn't the answer. Now I believe it is, as your code works for me with the meta tag and not without it. – T.J. Crowder Jan 08 '16 at 17:26
  • 1
    @T.J.Crowder: Please disregard my comment above. Thank you. My first couple of tries did not work, but when I placed the immediately under the tag, before any other tags, it now works. – JohnCroc Jan 08 '16 at 17:29
  • @JohnCroc: Yeah, IE's really picky about it. :-) For instance, I'm not 100% sure that if it's not there, then you add it and hit refresh without closing and opening a new window, it doesn't fail to recognize it. Glad it's sorted out! – T.J. Crowder Jan 08 '16 at 17:30

3 Answers3

3

The problem is that IE breaks itself in "compatibility" mode. The way in which it breaks itself in this case is failing to correctly look up your div id="body" element. I think that was observation error on my part, I think the real problem is addEventListener (because jQuery 2.x doesn't fall back to attachEvent anymore, since it doesn't support IE8 and earlier [or the "compatibility" modes that act like them]):

enter image description here

I can replicate the problem. The problem goes away if I tell IE not to break itself (e.g., not to use compatibility mode) by adding this to the top of the head element:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

IE's default for intranet sites is to display them in "compatibility" mode.

At one point I wasn't at all sure that when in "compatibility" mode it didn't get confused about that element with the id "body". IE has a history of getting confused by things like that. So you might also consider the-body or similar, but I tested and didn't seem to need it.

Side note: You probably also want to add a return false or e.preventDefault() to your click handler, so it doesn't follow the # link (which will scroll back to the top of the page and add # to the address bar).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
0

add meta tag below to your page

<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Basketman
  • 1
  • 1
-1

Do you mean <body> tag or <div id="body"> and do you ever try preventing default behavior of the link by using this below code :

$(document).ready(function(){
   $("#activities").click(function( e ){
      e.preventDefault(); //<---- add here
      $("#body").load("test02.html");
   });
});
Norlihazmey Ghazali
  • 9,000
  • 1
  • 23
  • 40
  • Yeah, and also, try another name, because IE may be stupid enough to mix up `` and `
    `, like, "Error, `body` is a reserved word" or something
     – Jeremy Thille Jan 08 '16 at 17:06
  • Yes sorry, I was unclear about that and will edit my original question. I mean the
    .
     – JohnCroc Jan 08 '16 at 17:08