jquery noConflict not working in IE8 only - javascript

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.

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

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.

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.

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.

Just had the same problem. IE 8 does not like:
var jQuery = jQuery.noConflict();
changed it to:
var jq = jQuery.noConflict();
worked fine.

I've had strange problems in the past with IE8 on machines with multiple versions of IE installed. In my case an error was popping when I tried to open a link in a new window via javascript. The same code worked fine on IE6 and 7, and a machine with only IE8 installed ran it fine as well.

This is an issue I also discovered. The way I fixed it was to upgrade my jQuery to 1.4. Version 1.3.2 fails with newer prototype on IE8. Sorry this answer is late.

I have the exact same error with 1.4.4 and 1.4.3 loading jquery after prototype and only in IE8, not even in Ie7 or Ie6
Jquery 1.4 solved this for me.

Related

jQuery No Conflict Wrapper Not Working

I'm getting the dreaded Uncaught TypeError: undefined is not a function error in WordPress. I'm pretty sure that I've properly enqueued my jQuery script (it's showing up properly in the footer), and I've used the following no conflict wrapper at the start of my code: jQuery(document).ready(function($) {.
I've tried replacing all $ variables with jQuery. I've also defined var $j = jQuery; and replaced all $ variables with $j.
There are other theme-generated jQuery scripts on the page that are working (embedded, not enqueued), so there might be potential conflicts, but I'm not sure how to debug that.
Any help appreciated. I can provide link to the site if that helps.
EDIT
I had this script working perfectly earlier from within the jQuery UI Widgets plugin, but that plugin seemed to be causing serious issues (crashed my site). So I disabled the plugin, and I haven't been able to get the script working since.
That doesn't look quite right. Try this
(function($) {
$(document).ready(function() {
console.log("dom is ready");
});
})(jQuery);
You could try this:
var j = jQuery.noConflict();
j(document).ready(function () {
...
//replacing all Dollar Signs with the j
});
That's what worked for me

query scrollTo does not work in Firefox

I'm using the scrollTo jquery library in a page I'm building, and it works with Chrome, Safari, and IE 8/9, but not with firefox. Firebug tells me,
TypeError: $("#wrapper").scrollTo is not a function
Here is the line that includes the scrollTo library
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
Here is the function where I use scrollTo
function scrollPage(currentpage,scrollpage) {
$(scrollpage).find('.text').fadeOut();
$(currentpage).find('.text').fadeOut( function(){
$('#wrapper').scrollTo( scrollpage, 1500, {
onAfter:function(){
$(scrollpage).find('.text').fadeIn();
}
});
});
}
Why would firefox not think scrollTo was a function, while all other browsers I've tried do?
EDIT: It seems that my files work on other computers, but not on my current install of firefox. I am going to re-install and see that helps.
SOLUTION:
Well, it seems a popup blocker caused a conflict! The OP found that Kaspersky installed a security add on in firefox, and was blocking scrollTo.
More: http://github.com/mootools/mootools-core/issues/2202
ORIGINAL POST:
I sometimes get that error when my jQuery code is not enclosed in a $(document).ready(function() {...your jquery statements here ...}); block.
Your function doesn't have to be inside doc ready but the statement that calls it should be.
Works for me (fiddle). Did you include jQuery in your html?
This is how you can do it (BEFORE your ScrollTo library, of course):
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Instead of using scrollTo I used scrollIntoView and it worked in FireFox, Chrome and IE.
Example :
var element = document.querySelector('.navbar-brand');
element.scrollIntoView();

Two different versions of JQuery in the same HTML page

I have an HTML document where I have referenced jQuery version 1.2.2 in the header for thickbox and I have later referenced jQuery 1.7.1 just before the </body> tag which is for a picture slideshow.
The problem is that the thickbox won't work unless the reference for jQuery 1.7.1 is removed which then stops the slideshow from working.
I have googled around to find out about $ conflict but none of the suggested solutions worked.
The most common one I have seen and did tried is: var $j = jQuery.noConflict();
How can I resolve this?
<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script>
<script type="text/javascript">
var jQ122 = jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var jQ171 = jQuery.noConflict();
(function($) {
$(function() {
// here $ is jQuery 1.2.2
});
})(jQ122);
(function($) {
$(function() {
// here $ is jQuery 1.7.1
});
})(jQ171);
</script>
If the plug-ins are well-behaved, then this should work:
<script src="jquery-1.2.2.js"></script>
<script src="thickbox.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="slideshow.js"></script>
(Obviously those script names are made up.) Here's an example (source) (I used jQuery 1.4.2 and jQuery 1.7.1 because Google doesn't host 1.2.2).
The above works with well-behaved plug-ins because a well-behaved plug-in doesn't rely on the global $ at all, but rather uses the value of the jQuery global as of when it was loaded and grabs a reference to it in a closure, then uses that local reference throughout the plug-in's code, like this:
// Example plug-in setup
(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})(jQuery);
or
(function() {
var $ = jQuery;
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})();
Both of those grab the global jQuery value as of when the plug-in is loaded and then use their local alias throughout.
If the plug-in wants to wait for the ready event, it can also do this:
jQuery(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
});
...which uses the jQuery function passed into the ready handler.
Any of those three would work correctly (with thickbox seeing jQuery 1.2.2, and slideshow seeing jQuery 1.7.1) with the script load order listed above.
But the "if" in my opening sentence is a big "if". A lot of plug-ins are not written to be bullet-proof in this way.
The above notwithstanding, I would migrate away from any plug-in that requires jQuery 1.2.2 in order to work, and wherever possible (and it's almost always possible) avoid having to load two different versions of any library, including jQuery, in the same page.
I would not advise using two different versions of jQuery. There are some other alternatives to thickbox that works perfectly with the latest jQuery.
What you want to do is an extremely bad practice (you should indeed migrate all code to the same version) but it can theoretically be done...
You would need to make changes to the respective plugins anyways tho...
consider this code:
<script src="jquery-1.4.js"></script>
var jQuery14 = jQuery;
<script src="jquery-1.7.js"></script>
var jQuery17 = jQuery;
you would then change the code of your plugins at the point where jQuery is handed to the plugin, which would look similar to this:
(function( $ ){
// all your plugins code would be here
})( jQuery ); // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables
Be advised.. this is veryveryvery messy to say the least!
write clean code or pay later! :)
Although you could use jQuery.noConflict(); to declare separate versions of jQuery at the same time.
I've often had some problems with IE8 with certain libraries when I do that.
So, an alternate solution would be to use an iframe to load a page within your current page.
Have a given version of jQuery on one page, and another on the second.
For example:
<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>

jQuerys .load() function on IE7

I am using the .load() function like this:
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: false });
$("#id").load('file.php');
var refreshId = setInterval(function() {
$("#id").load('file.php?randval='+ Math.random());
}, 4000);
});
</script>
It works perfectly in FF and Chrome. It also works perfectly in IE7.
BUT:
It displays an error message in the bottom bar of IE7 which says:
The object does not support this property or method.
I guess this is because IE7 doesn't support the .load() function.
Is there any way to get rid of this message? It looks really ugly and I'm not sure my boss will approve.
EDIT:
I found the reason!
It was because I used the online version of jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
It works fine if I switch to a local copy of jQuery.
<script type="text/javascript" src="custom/js/jquery-1.7.1.js"></script>
maybe check if your function is a function.
if(typeof $("#id").load == 'function')
or replace it with a $.get
$.get("file.php", function (data) {
like the following post jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari
I found the reason!
It was because I used the online version of jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
It works fine if I switch to a local copy of jQuery.
<script type="text/javascript" src="custom/js/jquery-1.7.1.js"></script>

Calling two types of jquery - issue in IE

Firefox works fine, Opera is great and Chrome works well also. IE is the issue. It seems to be ANY version of IE.
The site is http://s91532.gridserver.com and no matter where you click, it brings down our javascript menu from the top.
When you hover over the images it shows you the correct path and everything but when you click it just drops down the Ministry Index dropdown
I have removed the offending jquery which was an older version and am now just calling the site.js which is the code below:
jQuery.noConflict();
jQuery(document).ready(function(){
$('p#minguide-link a').click(function(){
if ($('#index-wrapper').is(':hidden')) {
$('#index-wrapper').slideDown('medium');
$('p#minguide-link a').addClass('down');
return false;
} else {
$('#index-wrapper').slideUp('medium');
$('p#minguide-link a').removeClass('down');
return false;
}
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
With that alone being called nothing happens. It seems that it is now fixed in IE from what I can tell.
Now how do I get site.js to be called correctly so the menu drops down correctly.
Matthew, replace the jquery 1.3 script tag for the jquery 1.4 script tag, make sure all other script tags are placed AFTER the jquery script tag ;)
I would echo the strong recommendation that you make everything work with the up-to-date version of the library, but you might try this: include the old jQuery, then right after that line add this:
<script>
jQuery.noConflict();
</script>
And then include a modified site.js file, changed as follows:
jQuery(function($) {
// existing code
});
Without any useful information (other than the link), all I can do is point you to this article:
http://codex.wordpress.org/Function_Reference/wp_enqueue_javascript/
You should be using 1.4.2. I've never ever had a single problem with it. You're calling conflicting versions of jQuery, so just use the better one.
Also, site.js isn't using jQuery in compatibility mode. You should change that first line to
jQuery(document).ready(function(){
not
$(document).ready(function(){
EDIT
Your site is running in no-conflict mode. You have to get rid of that $ at the beginning of site.js. It's throwing an error before anything happens. To fix that, all you need to do is change the very first $ to jQuery. All the other $s are fine, though.
Here's site.js in jQuery 1.4.2. Just replace the whole file's contents with this:
jQuery(document).ready(function() {
$('p#minguide-link a').click(function(){
$('#index-wrapper').slideToggle();
$('p#minguide-link a').toggleClass('down');
return false;
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
Additionally, I really suggest you look up jQuery's API. It's super easy to learn and very intuitively organized/layed out. And searching is a breeze.

Categories

Resources