jquery .load() not inserting data in ie8 and below

问题:

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!

回答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.

回答2:

ajax requests are cached in IE8, so just a little magic of

$.ajaxSettings.cache = false;

before the using load function

http://zacster.blogspot.in/2008/10/jquery-ie7-load-url-problem.html

http://api.jquery.com/jQuery.ajax/

cache (default: true, false for dataType 'script' and 'jsonp')
Type: Boolean
If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

回答3:

The only thing I can see wrong with this code is you are missing a closing bracket

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

回答4:

$.load() works in IE8. My guess is you have a previous JS error, triggered only in IE8-, which prevents it from functioning properly, or being called altogether.

回答5:

The problem is some functions are supported in one and not the others. For example one of my personal hates is how innertext is only supported in ie7,8 but not fox or chrome. Here is the compatability chart if you are interested http://www.quirksmode.org/dom/w3c_html.html .

Bottom line, unless you plan on changing the plugin yourself and you've already tried modernizer and that didn't help, you are going ot have to use another method of loading data. My suggestion is to use .html, you can not go wrong with that, or append and hand form the html yourself in the js. Simpler is always the best solution.