jquery $.getJSON only works once in internet explorer Help Please!!!

Posted by JasperS on Stack Overflow See other posts from Stack Overflow or by JasperS
Published on 2010-05-19T08:47:02Z Indexed on 2010/05/19 8:50 UTC
Read the original article Hit count: 521

Filed under:
|
|
|
|

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

© Stack Overflow or respective owner

Related posts about JSON

Related posts about JavaScript