0

The issue seems to be that IE (9-edge) is blocking only one part of my javascript that is being set. While I can drop security settings in order to display the desired effect, I can't ask users to do the same. I'm sure that there is something missing here since the rest of the code gets displayed correctly.

$.each(data.results.audio, function(key, val) {
   var replace = val.mp3Url.replace('&', '&');

   if (val.imgUrl) {
      status = "style='background:";
      switch (val.roadCondition) {
         case "1":
            status += "#4CAF50'"; // green
            break;
         case "2":
            status += "#FFEB3B'"; // yellow
            break;
         case "3":
            status += "#D32F2F'"; // red
            break
         case "4":
            status += "black'"; // black
            break;
         default:
            status += "white'"; // white
      }
   }

   var items2 = "<div class='bt_icon z-depth-5 hvr-round-corners'" + status + "><p class='shine waves-effect waves-green hvr-round-corners'><img id='" + key + "' class='majors ' src='" + val.imgUrl + "' alt='" + val.name + "' title='" + val.name + "' data-audio='" + replace + "' /></p></div>";
   $("#button_icons").append(items2);
   if (first && !isDone) {
      isDone = true;
      var audio = document.querySelector("audio");
      audio.src = replace;
      audio.load();
   }

   items.push(items2);

});

NOTE: background-color has the same effect.

The rest of the code works fine except for the "status" variable getting set. Chrome, Firefox, and Safari all display correctly. But on IE, it seems that the above "status" code never gets injected. It does not appear in the dom in dev tools. The only way to get all the code to show is by dropping security settings to medium and reloading the page. Any explanations/fixes?

Knut Holm
  • 3,988
  • 4
  • 32
  • 54
messif
  • 92
  • 2
  • 8
  • maybe IE needs the double-quotes around the attributes value in order to apply them – G-Cyrillus Feb 25 '15 at 15:47
  • The output is interpreted as double quotation. At least as far as I know in the DOM of chrome, firefox, and Safari. Good thought though. – messif Feb 25 '15 at 15:54
  • 1
    class and style (that shouldn't be inline...) touch each other without a space in-between. That is surely enough to knock IE out. – Jeremy Thille Feb 25 '15 at 15:56
  • 1
    Rather than appending strings together, you'd be better off using jQuery's functions: `jQuery("
    ").addClass("bt_icon").css("background", status).append(...` - this would help avoid mixing quotes, would deal with funky characters, etc.     – Joe Enos Feb 25 '15 at 15:58
  • The spacing didn't matter, but was fixed. I will rewrite items2 using jQuery function to see if that fixes it. Stay tuned. – messif Feb 25 '15 at 16:06
  • @Joe Enos: I get [object Object] for each item doing it that way. – messif Feb 25 '15 at 17:27
  • You'd have to follow that up the whole stack - looks like your HTML goes into an array called `items` right now, which contains strings. If you change the `items2` variable to be a jQuery object instead of a string, you'd have to ensure that whatever pulls the values from `items` knows that each value is a jQuery object, and treat it as such. So it's not just as simple as changing that one line, but rather changing the overall way you're appending HTML to your page. – Joe Enos Feb 25 '15 at 17:32
  • Duly noted, and I will definitely practice this from now on. However, that still doesn't address my problem. – messif Feb 25 '15 at 19:08

1 Answers1

0

Turns out the answer was in the meta tag for IE compatibility. When IE runs non secure intranet content it defaults into compatibility mode. This is what I had:

<meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8"/>

This is what I changed it to:

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

There is a great explanation on why this was causing my issue here: IE Compatibility Mode: 'X-UA-Compatible' tag 'Edge'

Community
  • 1
  • 1
messif
  • 92
  • 2
  • 8