Question

I’ve been looking for a solution all day, but I’m still seeing this error.

It’s a Expression Engine setup for a client of ours and we want to implement ajax-navigation. For this we are using the default $.load() function and this works perfectly in ie9, FF, Safari, Chrome, Opera… but it doesn’t work in ie8 and below.

I’ve tested the callback function, that one IS being called, the data is send, I can read it in the console when logging it. But for some odd reason the data isn’t inserted.

Here is the code:

load_page: function(url, func){
    $('#content').load(url+' #content>div', function(data, textStatus, jqXHR){
        console.log('page loaded!');
    });
}   

There was a whole bunch of extra code in the callback function but I’ve been cleaning out the whole javascript/css everything. In search of bugs but nothing to be found.

Based on the comments I decided to add the url and a download:

• The site this problem is found in: http://www.track.be/devo_9836/nl/ee.php
• A packet of files, with the problem: http://stijnd.be/ie8_load.zip

Another piece of the puzzle:
There is something weird going on in the javascript. Even the google maps api doesn’t function properly, that’s the first time this happened to me when using the google maps api.

EDIT : Answered

I finally found the answer to this question, thanks to @epascarello. It is in fact the fault of the data I was trying to import. Because IE8 & below don’t understand HTML5 they will try to import the elements into the dom, but when alerting the data I saw the following: [object HTMLUnknownElement], [object HTMLUnknownElement], [object HTMLUnknownElement],…

When I changed the markup of the data to use good old div’s instead of article-elements, everything worked fine!

Answer 1

I had the same problem and I noticed that if the url returns invalid HTML (eg. extra end tag) it can stop it from loading or finding the correct element.

In my example all I had to do was correct the HTML from the URL and then it worked correctly.