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
Related
I've used my script on Tampermonkey (Firefox) for 6 month.
At now I have this error, script work partially, not all time.
I don't know why.
I have tries various suggestions about jQuery, doesn't work
Top of my script:
(function() {
'use strict';
function RPP(){
RedeemRPProduct('fp_bonus_100');
}
var body = $('body'); //I think error is here..
var points = {};
At now script works some times. When it doesn't works appear in console this error:
ERROR: Execution of script 'script-name' failed! $ is not defined
What's happened?
Thanks
I think the cause is that the website administrators removed jQuery from their code. With modern JS, it's mostly obsolete for things like selectors. I recommend simply removing jQuery references from your script and use normal DOM API:
To access body:
document.body
To find an element using selector:
document.querySelector("div#my_div")
Alternatively you could include jQuery in your script using #require.
I see your problem is solved, but leaving this here for others with the same error...
I'm also using Firefox, and my Tampermonkey was 1 year old (I forgot that I disabled the addon's auto updating). It worked fine, I never had the problem you described. Till a couple of days ago when I updated to the new version, and my userscripts stopped loading 10% of the times (got the mentioned error message in console).
Newer Tampermonkey-s are much faster than older versions, loading the userscripts earlier, sometimes before the jQuery library script of the original site is loaded, even if you are using // #run-at document-end.
How I fixed: wrapped my whole userscript content into 1 function, which is called only when the jQuery script is 100% loaded, using a checker function.
Add the next line to the top of your script, right after the Header:
function runScript() {
Add the next lines to the bottom of your script (to the end):
};
var waitForJQuery = setInterval(function () {
if (typeof $ != 'undefined') {
$(runScript);
clearInterval(waitForJQuery);
}
}, 100);
You're referencing jQuery (via the $) before it has loaded into the page.
It is working sometimes as I'm guessing on some occasions jQuery manages to load before you make your call...but sometimes it doesn't and you see the error.
Try this:
<script src="...your jquery reference..."/> <!-- at the top of your page -->
<!-- at the bottom of the page -->
<script>
var body;
var points = {};
document.addEventListener("DOMContentLoaded", function() {
body = $(body); //it won't try and use jQuery until the doc is ready
//...other script stuff...
});
</script>
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...
I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.
This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready
I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.
Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();
Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>
Hi I am trying to make a jquery no conflict work as descriped here:
http://drupal.org/node/1058168
I have this in my php template:
<script type="text/javascript">
var $jq = jQuery.noConflict();
</script>
I modified my javascript accordingly. But it does not work... it starts the first function, but then after it, it does not run any of it:
$jq(function () {
console.info('First $JQ function');
//"use strict";
// this function is strict...
$jq(document).ready(function () {
The $jq(document).ready(function () does not run, hence the whole script stops. The full script is located at www.htconsulting.hu/sites/validation.js
Thank you for your help!
Update:: removing the first $jq(function () did help to at least remove the dougle ready functions. Still it does not solve the problem I faced initially for which I use the noConflict. Part of the code would ensure that based on input thhe input area color changes, as the helper text next to it. The text still does not change. Since in my testing enviroment everything worked, I assumed its because the site I am forced to use, uses old Jquery. Appereantly, using the newer one still does not solve the problem. Form located at www.htconsulting/test/form
$jq(function () {
is equivalent to
$jq(document).ready(function () {
http://api.jquery.com/ready/
So basically you have a document.ready inside of a document.ready. I don't think that works, try removing the inner ready and see if that helps.
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.