I've been fighting against IE8's compatibility mode all day and I'm about to chuck a brick at it.
I have some code, which uses jquery 1.2 (yes it's old - can't change that), to search for some records in our web app. The results of the search can be clicked on to view the contents of the record (by using .animate() it opens a space under the row and creates another TR underneath and inserts HTML data from a json feed).
In IE8, clicking on a result to view the content forces it to reload in compatibility mode, where it works fine in all other browsers (IE7, FF3.0+, Chrome, Safari). I've been trying to use IE8's developer toolbar to debug and track down why this is happening but I've not been able to find any error or any evidence of what might be causing it.
Code that shows preview:
// Code that binds a click to open the result preview:
var _tr = $('<tr class="outline" id=' + val.assessment.assessmentId + '></tr>').bind("click", msi.reuseAssessment.preview);
...
// in msi.reuseAssessment.preview()
var url = "/direct/msi-assessment/" + assessmentId + "/assessmentHtml.json?no-cache=true";
jQuery.ajax({
type: "GET",
url: url,
dataType: "json",
success: function(d, textStatus){
var _content = d.assessmentHtml;
var _preview = $("<tr id=" + assessmentId + "></tr>");
// loadContent
_tr.after(_preview.animate({
height: 50
}, 500, 0, function() {
msi.reuseAssessment.drawPreview(this, _content); // Puts the content from the json into a td
}));
},
error: function(xmlHttpReq, status, errorThrown) {
// display error msg
}
});
Stepping through the code using IE8's developer tools, it gets passed here and into somewhere into jQuery's code and that's when it refreshes in compatibility mode. I've validated the JSON, the HTML code that comes out with w3c and it's all fine, I'm really at a loss as to what's happening.
Does anyone know how I might better track down what's causing it, or should I just force IE7 mode on these pages?
Edit: The search is performed in an ajax 'popup' that appears over the top of the screen. It's template (base HTML) is loaded from a separate HTML file, and injected into a div at the bottom of the original page. This means there would be nested HTML files (with <html></html> tags etc). Would this affect it also?
Edit 3: removing these duplicate tags did not fix the problem.
Edit 2: Still haven't solved this. Is it just one of those things that IE8 won't display properly and put it down to browser quirk? I would really appreciate some help on this.