CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
JohnCroc
JohnCroc

Reputation: 79

Embedded JavaScript does not run in IE 10 or 11 (works fine in Chrome and Firefox)

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?

Upvotes: 1

Views: 1911

Answers (3)

Basketman
Basketman

Reputation: 1

add meta tag below to your page

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075755

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).

Upvotes: 3

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

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");
   });
});

Upvotes: -1

Related Questions