jquery $.getJSON only works once in internet explorer

Question

I have a php function which inserts a searchbar into each page on a website.

The site checks to see if the user has javascript enabled and if they do it inserts some jquery ajax stuff to link select boxes (instead of using it's fallback onchange="form.submit()").

$.getJSON works perfectly for me in other browsers except in IE, if I do a full page refresh (ctrl+F5) in IE my ajax works flawlessly until I navigate to a new page (or the same page with $PHP_SELF) either by submiting the form or clicking a link the jquery onchange function fires but then jquery throws an error:

Webpage error details

Message: Object doesn't support this property or method

Line: 123

Char: 183

Code: 0

URI: http://~#UNABLE~TO~DISCLOSE#~/jquery-1.4.2.min.js

It seems like jquery function $.getJSON() is gone???

This seems to be some kind of caching issue as it happens on the second page load but I think i've go all the caching prevention in place anyways, here's a snipet of the code that ads the jquery functions:

if (isset($_SESSION['NO_SCRIPT']) == true && $_SESSION['NO_SCRIPT'] == false)
        {
            $html .= '<script type="text/javascript" charset="utf-8">';
            $html .= '$.ajaxSetup({ cache: false });';
            $html .= '$.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {   
                        alert(textStatus);
                        alert(errorThrown);
                        alert(XMLHttpRequest.responseText);
                        }});';
            $html .= '</script>';

            $html .= '<script type="text/javascript" charset="utf-8">';
            $html .= '$(function(){  $("select#searchtype").change(function() { ';
            $html .= 'alert("change fired!"); ';
            $html .= '$.getJSON("ajaxgetcategories.php", {id: $(this).val()}, function(j) { ';
            $html .= 'alert("ajax returned!"); ';
            $html .= 'var options = \'\'; ';
            $html .= 'options += \'<option value="0" >--\' + j[0].all + \'--</option>\'; ';
            $html .= 'for (var i = 0; i < j.length; i++) { options += \'<option value="\' + j[i].id + \'">\' + j[i].name + \'</option>\'; } ';
            $html .= '$("select#searchcategory").html(options); }) }) }) ';
            $html .= '</script> ';

            $html .= '<script type="text/javascript" charset="utf-8"> ';
            $html .= '$(function(){  $("select#searchregion").change(function() { ';
            $html .= 'alert("change fired!"); ';
            $html .= '$.getJSON("ajaxgetcountries.php", {id: $(this).val()}, function(j) { ';
            $html .= 'alert("ajax returned!"); ';
            $html .= 'var options = \'\'; ';
            $html .= 'options += \'<option value="0" >--\' + j[0].all + \'--</option>\'; ';
            $html .= 'for (var i = 0; i < j.length; i++) { options += \'<option value="\' + j[i].id + \'">\' + j[i].name + \'</option>\'; } ';
            $html .= '$("select#searchcountry").html(options); }) }) }) ';
            $html .= '</script> ';
        }; return $html;

remember, this is part of a php funtion that inserts a script into the html and sorry if it looks a bit messy, I'm new to PHP and Javascript and I'm a bit untidy too :)

Please also remember that this works perfectly in IE on the first visit but after any navigation I get the error.

Thanks guys

Answer 1

Okay, I found my answer. The problem is with IE and this line of code in the tag of each web page:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I had my tag declaring jquery before this line and it needs to go after.

this must be a bug in IE. It causes a weird result don't you think?

Answer 2

I'm getting the same issue. Overwriting the xhr method with the version from 1.3 just doesn't work (as suggested elsewhere). Also, adding the utf-8 meta tag doesn't help either.

I have a TON of libraries layered on top of jQuery, and I suspect that may have something to do with it.