JQuery ONLY works in compatibility mode

Question

I am working on creating a web application that will be displayed on a local intranet site
NB I am using IE11
It takes information from an XML file and cycles through it, displaying each section in turn. I have had to use an old version of JQuery in order to make this work on the system it'll be running on, so I am using 1.12.4. My problem is that the page pulls in the information in the first instance, but after that it does nothing. A quick check in the debugging console tells me that the page is Unable to get property 'childNodes' of undefined or null reference - which seems strange to me as it works in the first instance. If I run the page in compatibility view, the script works properly, but then this destroys all of my styling etc. Is there a way to fix this or am I going to have to deal with an awful compatibility view styled page?
My code is below
HTML

<div id="MainNews">
    <div class="panel panel-default" id="MainNewsStory">
        <h1 id="StoryHeadline"></h1>
        <p id="StoryBody"></p>
    </div>
    <img id="StoryImage" src=""/>
</div>

XML

<NewsArticle>
<Story>
    <StoryHeadline>This is the headline of the first news story!</StoryHeadline>
    <StoryBody>This is the body of the first news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nunc ex.</StoryBody>
    <StoryImage>Images\ImageOne.png</StoryImage>
</Story>
<Story>
    <StoryHeadline>This is the second headline! It accompanies the second story</StoryHeadline>
    <StoryBody>This is the body of the second news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nunc ex.</StoryBody>
    <StoryImage>Images\ImageTwo.png</StoryImage>
</Story>
<Story>
    <StoryHeadline>This is the third headline now!</StoryHeadline>
    <StoryBody>This is the body of the third news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nunc ex.</StoryBody>
    <StoryImage>Images\ImageThree.png</StoryImage>
</Story>

JavaScript

$(function(){
$.ajax({
    type: "GET",
    url: "SetScreen.xml",
    dataType: "xml",
    success: parseXml
});

function parseXml(xml) {
    //--Fill the content in to the main news story START--//
    var storyCount = 0;
    var xStories = xml.getElementsByTagName("StoryHeadline");
    var xStoryBody = xml.getElementsByTagName("StoryBody");
    var xStoryImage = xml.getElementsByTagName("StoryImage")
    var maxStories = xStories.length;
    function fillStory(){
        $('#StoryHeadline').html(xStories[(storyCount) % maxStories].childNodes[0].nodeValue);
        $('#StoryBody').html(xStoryBody[(storyCount) % maxStories].childNodes[0].nodeValue); 
        $('#StoryImage').prop("src", xStoryImage[(storyCount++) % maxStories].childNodes[0].nodeValue);
    }
    //--Fill the content in to the main news story END--//

    fillStory();
    var storyTimer = setInterval(fillStory, 2000);
}
});

Any help would be very much appreciated.

I don't see what this has to do with jquery. Sure, you used jquery to get the xml, but it's failing in an area that doesn't have anything to do with jquery. *It isn't jquery that isn't working.* — Kevin B, Sep 22 '16 at 15:56
*"If I run the page in compatibility view, the script works properly"* ~ Run your HTML though the W3C markup validator and fix any errors. — Sparky, Sep 22 '16 at 16:06
@Sparky I tried that and the only errors I'm getting are that the `h1` is empty and the `img` has no `src` - which shouldn't have anything anyway because they're being populated from the xml file? — MoultoB, Sep 23 '16 at 08:27
if I remove the `fillStory` intial call, the page never gets populated at all. Could there possibly be a problem with the `setInterval`? — MoultoB, Sep 23 '16 at 09:40

score 0 · Accepted Answer · edited May 23 '17 at 12:33

EDIT: So my original 'fix' for this stopped working after about 5 page loads, so I delved a little deeper, and managed to find the root(s) of the problem.

This turned out to be a combination of a couple of things. I managed to force my page styling and everything to remain normal even in compatibility view using

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

as the first tag in my <head>. So this solved the awful styling problem, even if the page is forced as compatibility view. Source here.

Another contributor to the problem was that I had was that my xml file contained the following header that can apparently break in IE.

<?xml version="1.0" encoding="utf-8" ?>

So removing that allowed my JavaScript to run. Source.

The final problem I had was that once the JavaScript was running, it would only run a few times before stopping, and then tell me it couldn't access the variables it was trying to. So I first tried declaring the variables inside the function, but this then meant that they were declared every time the function ran, which caused some unsightly memory issues. I then moved to declaring the variables outside of the function, but assigning their values inside.

var storyCount = 0;
    var xStories, xStoryBody, xStoryImage, maxStories;
    function fillStory() {
        xStories = xml.getElementsByTagName("StoryHeadline");
        xStoryBody = xml.getElementsByTagName("StoryBody");
        xStoryImage = xml.getElementsByTagName("StoryImage");
        maxStories = xStories.length;
        $("#StoryHeadline").html(xStories[(storyCount) % maxStories].childNodes[0].nodeValue);
        $("#StoryBody").html(xStoryBody[(storyCount) % maxStories].childNodes[0].nodeValue);
        $("#StoryImage").prop("src", xStoryImage[(storyCount) % maxStories].childNodes[0].nodeValue);
        storyCount = storyCount + 1;

So now everything works as I want it to!

JQuery ONLY works in compatibility mode

1 Answers1