jquery $.get in IE (and also chrome?)

Question

I have (http://science.users.anapnea.net) a section of html/js that isn't playing well in other browsers.

The section in question is an anchor tag that calls a jquery $.get function:

$.get("info.html", function(data){
   $('#page1Content').html(data);
});

This is doing nothing in IE, but works fine in FF and Chrome. The only hint of what might be the problem that I have found is one user reported a content-type error that caused a similar function not to work in IE

I am using meta http-equiv="Content-Type" content="text/html; charset=UTF-8" in the info.hmtl page

Additionally, while the info.html page will load correctly in Chrome, within that page there is a colorbox function to display some inline content. This function works when I go directly to info.html, but not when I load info.html through the $.get request.

Any input on this would be most helpful, and I really hope the formatting on this is correct...(couldn't find a faq entry regarding markup used within the input box here...)

Thanks.

Answer 1

For the Content-Type, as I remember, one of the specs says that the raw HTTP header is supposed to override the meta tag (for whatever reason), so you may have to set it via .htaccess (or equivalent if you're running something other than Apache).

Also, I think that example code is sub-optimal. As I remember, jQuery has a method for that and what you really mean is $('#page1Content').load('info.html');. (Which may also fix your problem since jQuery sometimes includes workarounds for common issues in the more specialized methods)

As for the colorbox, my guess is that you're initializing it via $(document).ready() which will fire before info.html gets included. If that's the case, you have to explicitly re-trigger it on AJAX load.