jQuery/Mootools issue in IE8 - javascript

I'm working on a page that has both Mootools 1.4 and jQuery 1.5.1 running. I know this isn't ideal but I don't really have an option. The page works fine in most every browser, but not in IE8. I get the following error:
Object doesn't support this property or method
when attempting to add a click event, despite putting my jQuery-specific code in a noConflict block. Here's a fiddle that reproduces the issue: http://jsfiddle.net/p7rFV/1/
Thanks for any ideas on what's going on.
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
document.getElementById('button').addEvent('click', function(){
document.getElementById('tester').hide();
});

Two issues with your fiddle:
When you do, you should use jQuery.noConflict();, not $.noConflict();
MooTools can't enhance DOM elements at the prototype level in IE like it can in other browsers, so you have to always be sure to pass them through $() or document.id() before using MooTools-specific functions on them. So this line fails:
document.getElementById('tester').hide();
...because the DOM element has no hide method. Instead, just use $() or document.id():
$('tester').hide();
document.id('tester').hide();
...which will both look up the element and extend it.
Updated fiddle

Related

jQuery is adding a strange attribute to html elements

In internet explorer 8, emit strange jquery attributes that sometimes can cause problem and when I need to select them, the selector won't work.
I don't know if this is related to my rendering problem, but I've never noticed it before, in IE8 or any other browser. Can someone explain what these attributes are?
sizzle-1377765392290 ="[object Object]"
also it creates unique id for each element
i.e: jQuery110201441698622493836
https://www.dropbox.com/s/e5l0r9weht23mhn/Ie8.PNG
Thanks You
See the answer here, jQuery uses it to attach event handlers etc in IE.: https://stackoverflow.com/a/16341470/1371408
As i can see in this bugs.jquery.com/ticket/8539 that sizzle cache bug was fixed in 1.7 version of jquery .
And as per your comment you included older version of jquery 1.1.0 so updating it to latest release of jquery will solve your issue .
You can remove this by,
var re = /\s*(sizset|sizcache)\d*="[^"]*"/gi;
source = source.replace(re,'');
http://jsfiddle.net/mblase75/fMdVc/
Alternatively, jQuery has a .removeAttr() method, but you'll have to apply it to specific tags:
jQobj.removeAttr('sizset').removeAttr('sizcache');
Have a look

tooltip jquery method not working on IE

I am running my App on Internet Explorer. There seems to be some issue with JQuery method:
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
for which, i get the following error on the javascript console:
Object doesn't support property or method tooltip
What can be the cause of this error? please help.
There's no standard tooltip() function in jQuery, it's provided by a plugin. Ensure that you're a. loading the plugin and b. loading it after jQuery by placing the <script> tag for the plugin after the one for jQuery.
It looks like you're using a tool tip plugin for jQuery, but it hasn't been loaded when you make the call.
If this code is being run when the page loads, you should put it into a $(document).ready() function, to ensure that all the supporting libraries are loaded before it runs. This should solve the problem.

Issue with javascript/jquery code in wordpress

Hey guys out of no where I got this issue that came up on a wordpress site, no idea why. So let me tell you the issues:
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.rating.pack.js:17 from jquery.rating.pack.js:17
Uncaught TypeError: Object [object Object] has no method 'live' from jquery.colorbox-min.js:4
So I have 2 plugins that stopped working because of this. I don't know if there was an update of some sort or where to even begin.
If you could give me a hand I would appreciate it.
Let me know if you need anything!
EDIT:
prodjsoundlighting.com - link to site with issue.
You have two jQuery scripts included on your website, you need to remove the one that is not from wordpress.
/wp-includes/js/jquery/jquery.js?ver=1.8.3
http://code.jquery.com/jquery-latest.min.js
What happens is all jQuery extensions (colorbox, rating pack) attach themselves on jquery object from first jquery script, then the second jquery script overwrites jquery object and you can't access any of the previously attached jquery extensions.
EDIT:
To avoid "$ is not a function" errors you will need to either replace all $ to jQuery
$(document).ready(function(){
will become
jQuery(document).ready(function(){
OR whats usually used, encapsulate your code with anonymous function like this:
(function($) {
// here goes your javascript code where you access jquery object will dollar sign
})(jQuery);
P.S. There is one quick fix you could use until you fix your code. Just use this in the same place where you had that other jquery call:
<script>var $ = jQuery;</script>
You should update to the latest version of Colorbox. Grab it here.
Old versions of Colorbox relied on .live(), which is a deprecated function (from 1.7+) and removed completely from jQuery 1.9+.

jquery bug with firebug

I am using jQuery javascript framework and whenever i load pages with firebug it returns "$" as an anonymous() function in console. Is there a way to fix it?
Thanks in advance.
Looks like jQuery was not loaded when you tried to call it. Try calling the object using jQuery instead of $ to confirm jQuery was actually loaded. Also, are you using other libraries like Prototype as well because they might be interfering with the $ object!! If yes, try using jQuery.noConflict().
I don't know why it happens, but yes I see it often too. Something about firebug interferes with the binding of the jQuery function to $ under some circumstance.
You're probably aware it's just the firebug console that's bugging out ( $() in included scripts should be working as expected), but it's worth mentioning. Usually I have to reload the page, or even kill the tab.
I'd like to understand why it happens, but for now when it happens (assuming jquery really is loaded in the page) I found I can fix it in the console with:
$ = jQuery;

Why isn't jQuery $('.classname') working in IE?

With valid HTML the following finds the object as expected in all browsers but gets NULL in IE (6 & 7).
$(document).ready(function() {
alert( '$(.rollover):\n' + $('.rollover'));
});
I've tried by switching it to something simpler like $('a') but I always get NULL in IE.
Update:
After running the page through the W3C validator (and ignoring what my Firefox validator plugin was telling me) it appears there are actually quite a lot of validation errors (even with HTML 4 Transitional defined), which I can't easily fix, so my guess is that is the cause of my issues. As trying on a very simple document works as expected in IE.
If you're having $ conflicts there are many way to avoid this as documented here.
It seems that it is AjaxCFC's JavaScript includes that are causing a problem, more specifically the ajaxCFC util.js which seems to define it's own $.
Moving those includes before that of the JQuery lib fixed the above issues I was having.
I think we'd have to see the HTML. I've never had a problem with class selection in jQuery/IE. You should get [object Object] for the jQuery object in the alert. Also, are you using an old version of jQuery?

Categories

Resources