jquery noConflict not working in IE8 only

Question

I have a website using the prootype framework and I am looking to use a jquery plugin. Everything works just not in IE8. It works in ie7 which amazes me. Any idea what maybe wrong?

IE8 gives me object doesnt support this property or method where line jQuery.noConflict(); is

<script src="/my/docs/jquery.js" type="text/javascript"></script>
<script src="/my/docs/jquery.simplyscroll.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery.noConflict();
function OpenUp(sURL){
  window.open(sURL,null,'height=560,width=820,status=yes,toolbar=yes,menubar=yes,location=yes,resizable=yes,scrollbars=yes',false); 
}
jQuery(document).ready(function($) {
 $("head").append("<link>");
 css = $("head").children(":last");

 css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: "/my/docs/jquery.simplyscroll.css"
     });

     $("#scroller").simplyScroll({
       autoMode: 'loop',
       framerate: 1,
       speed: 1
     });
});
</script>

I also tired the following: var $j = jQuery.noConflict(); var j = jQuery.noConflict();

everythig works just not in IE8 alone.

Answer 1

I've run into this also using jQuery-1.4.4.js. Everything works fine except in IE8. IE8 does not recognize jQuery() anything. I was able to resolve the problem by loading jQuery and running $.noconflict() prior to loading Prototype and it all runs fine on all my test browsers including IE8. This sequence is contrary to the jQuery documentation and therefore I'm nervous about it. Can't find anything on the jQuery site about it.

t22harris

Answer 2

The only way I was able to fix this, for IE8 (which was the only one with the problem) and other browsers was to put jQuery and the noConflict() call in the head immediately after initializing the other library. Like so:

<script type="text/javascript" src="/path/to/prototype.js"></script>

<script type="text/javascript" src="/path/to/jquery.js"></script>

<script type="text/javascript">var $j = jQuery.noConflict(); </script>

... followed by any other scripts that use either jQuery or Prototype.

Answer 3

I've been having a similar problem. The solution that I'm currently using is to save the $ variable in a temporary variable, loading jquery(I'm loading jquery from js code), running jquery dependent code (with jQuery.noConflict), the setting the $ variable back.

It's dirty, but it seem to have done the trick for me.

My function which adds jquery (if necessary) is:

function getJQueryAndGo(callback) {
    var thisPageUsingOtherJSLibrary = false;
    var tempDollar = $;
    // Only do anything if jQuery isn't defined
    if (typeof jQuery == 'undefined') {
        if (typeof $ == 'function') {
            thisPageUsingOtherJSLibrary = true;
        }
        loadToHead('script','http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', function() {
            if (typeof jQuery=='undefined') {
                    //alert('Super failsafe - still somehow failed...')
            } else {
                jQuery.noConflict();
                (function($) {
                    callback($);
                })(jQuery);

            }
        });
    } 
    else 
    { // jQuery was already loaded
        jQuery.noConflict(); // This may not be necessary
        (function($) {
            callback($);
        })(jQuery);
    }

    $ = tempDollar;
}

The loadToHead simply loads the script into the head tag somewhere and runs the callback function when the script is loaded.

Most of this code I have found online and tweeked it. Unfortunately I don't remember where to give the credit as of now.

Answer 4

Ive had a simular problem in the past and worked around it by using the emulate ie7 meta tag

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Im not sure if this is the best work around though.