I'm reading the jsfiddle tutorial and copied the demo to jsfiddle:
https://jsfiddle.net/cdt86915998/ps6shugt/. Running this demo in chrome and console gives Uncaught TypeError: undefined is not a function.
I suppose this error is caused by javascript configuration, but I already have jQuery(edge) configured.
This is my code:
$('test').addEvent('click', (function() {
$('test').set('html', 'Goodbye World!')
$('test').fade('out');
}));
Select MooTools not jQuery as your Javascript Frameworks and Extensions.
From your tutorial:
We are using MooTools (jsFiddle’s default library) to do a number of
things
please change addEvent to on function. You clearly don't have the proper knowledge about jQuery functions. Please refer the jquery doc properly
$('#test').on('click', (function() {
$('#test').html('Goodbye World!')
$('#test').fadeOut();
}));
I assumed from the question you were using jQuery - if so, your syntax is wrong.
Other answers have solved your issue using mootools, so you're better off following their advice if that's the library you're trying to use.
With jQuery
To select the div by id you need to add a # to its selector.
Also, some of your jQuery methods were incorrect. Try using this code below:
$('#test').on('click', function() {
$('#test').html('Goodbye World!')
$('#test').fadeOut();
});
Assuming you want to persist in using jQuery, try updating the javascript section as follows:
$('#test').on('click', (function() {
$('#test').html('Goodbye World!');
$('#test').fadeOut(1000);
}));
This corrects the syntax for selecting by id using #id. The error you are seeing is because .set and .fade are not jquery functions.
If you look at the Tutorial it requires 'Mootools' and not 'jquery' which is what you have tried to insert. jQuery doesn't have addEvent. Try with mootools and it will work straight away
Related
I have this simple jQuery code
function removePreloader() {
jQuery('ul.woocommerce-error').has('li').jQuery("#preloader").css("display", "hidden");
}
and it's being called by
jQuery('form[name="checkout"]').submit(function(e) {
... // lots of line
setTimeout(removePreloader(), 2000);
}
both block of codes is inside jQuery(document).ready(function() { ... });
the other jQuery() is working fine, only this one is causing a problem and showing
Uncaught TypeError: jQuery(...).has(...).jQuery is not a function
is it not possible to use .has? or is there any alternate? because this wordpress theme using a lot of old plugin, so they can't accept newer version of jQuery.
Thank you
here is the screenshot from jquery.com
I just trying to follow this javascript and modified it a little bit, please let me know how to do this the right way, because I don't never code with javascript before
You're using an invalid jQuery statement .jQuery..., I would suggest the use of the if statement when checking if there are any li children inside the list like :
function removePreloader() {
if( jQuery('ul.woocommerce-error li').length ){
jQuery("#preloader").css("display", "none");
}
}
NOTE 1: display property has no hidden value, so you're searching for none instead.
NOTE 2: Remove the () in the function call like :
setTimeout(removePreloader, 2000);
Uncaught TypeError: jQuery(...).has(...).jQuery is not a function
means .jQuery is not a function on the returned object of .has(). That also means .has() works just fine here. Try to use .find() instead.
I have lots of functions like: $.fn.functionName = (function() {
I call them using: $(this).functionName();
This is deprecated in jQuery 3, how can I rewrite the function definition in order to make it work well (just like before).
Do you know a Library that is able to (automatically) replace the deprecated jQuery sintax? There's the jquery migration tool: https://blog.jquery.com/2016/05/19/jquery-migrate-1-4-1-released-and-the-path-to-jquery-3-0/ but it doesn't help me too much.
Thank you.
EDIT
Example log from jQuery 3 migration tool:
JQMIGRATE: jQuery.fn.focus() event shorthand is deprecated
console.trace()
migrateWarn
jQuery.fn[name]
$.fn.functionName/this.initData
$.fn.functionName
<anonymous>
_onReady
$.obj
You need to replace jQuery.fn.blur() to jQuery.fn.trigger('blur') and jQuery.fn.focus() to jQuery.fn.trigger('focus') as per this https://github.com/mervick/emojionearea/issues/217,
I was using the "livequery" (https://plugins.jquery.com/livequery/) and inside it I was calling the $.fn.functionName.
I know, it's an old code, but that was the problem. As freedomn-m said in a comment, the $.fn.xxx is not deprecated. I hope this will help others too.
I have got this line in my code at website
http://talentbridge.pl/webinar/landingRB.php
$(document).ready(function() {
$("#timeleft").countdown("2016/05/06");});
and it is giving me this error:
TypeError: $(...).countdown is not a function
$("#timeleft").countdown("2016/05/06");
Please let me know how to fix this problem. Thanks.
You are using the source from countdownjs.org, but nowhere there it is stated that this is a jQuery-plugin which can be used with $().countdown(). See their demo-page for an example of the usage.
Furthermore I would recommend not to use a github-url as a CDN for your javascript sources.
I'm assuming $ here refers to jQuery . jQuery doesn't have anything called countdown . Probably someone in your team defined a prototype function , by extending jquery
Like as shown:
$.prototype.countdown = function(){alert(1)};
$('head'). countdown();
You need to re-define it , or check the commit list .
Hey all looking throughout all of stackoverflow this looks like a common error i just cant wrap my head around. i am busy upgrading our site from pure JS to jquery in preparation for us moving over to Rails 3.1 now i have this javascript:
:javascript
["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"].each(function(element) {
$$('.' + element).each(function(s) {
s.toggle();
});
});
so basically it is running trough an array of css classes and then toggling them. now when i run this with the jQuery lib i get an error that looks like this
Uncaught TypeError: Object Ownership,Management,EmploymentEquity,SkillsDevelopment,PreferentialProcurement,EnterpriseDevelopment,SocioeconomicDevelopment has no method 'each'
now i am just trying to test one element at a time to get the jQuery working at least this is what i have so far.
$("OwnershipHeader").click(function () {
$("Ownership").toggle("slow");
});
very simple so just when you click on the header it toggles its children. so when i enter that in the console it works just fine. until i click on the header of coarse:
Uncaught ReferenceError: $$ is not defined
this seems really simple and yet its breaking every time... i am relatively new to jQuery i have just worked with the Jquery UI lib before. any suggestions are appreciated
Uncaught TypeError: Object Ownership,Management,EmploymentEquity,SkillsDevelopment,PreferentialProcurement,EnterpriseDevelopment,SocioeconomicDevelopment has no method 'each'
I think you meant forEach. But since this doesn't work in all browsers, use jQuery's each function
$.each(["Ownership", "Management"], function(i, element) {...
Uncaught ReferenceError: $$ is not defined
jQuery uses a single dollar sign ($)
$("OwnershipHeader").click(function () {
$("Ownership").toggle("slow");
});
jQuery selectors are mostly like CSS selectors. So this should work:
$(".OwnershipHeader").click(function () {
$(".Ownership").toggle("slow");
});
Try this.
var array = ["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"];
$.each(array, function(i,element) {
$('.' + element).toggle();
});
It looks like it was coded previously with PrototypeJS, which provides $$ and [].each.
I'm not sure if .toggle is the same behavior in PrototypeJS and jQuery.
var col = ["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"];
$.each(col,function(i,e){
$('.'+e).each(function(j,s){
$(s).toggle();
});
})
*in jquery first of all there is no variable defined as $$ and only $ is defined.
*secondly each function is used as i have mentioned and the first variable passed to the function that is provided to each is the index in array and second variable is the actual element
look here for each and toggle documentation
I recently transferred a site to a new host. Reloaded everything, and the javascript that worked fine before is breaking at an element it can't find. $('#emailForm') is not defined.
Now, the #emailform isn't on the page, but it wasn't before either, and JS used to skip this and it would just work. Not sure why this is happening. Any clues
Here is the site I am having the prblem:
http://rosecomm.com/26/gearwrench/
jQuery will return an empty jQuery object from $('#emailForm') if there isn't an element with the id='emailForm'.
One of the following is likely true:
You forgot to include jQuery - therefore $ is undefined.
There is another library included that uses $ - in which case you can wrap your code in a quick closure to rename jQuery to $
The Closure:
(function($){
// $ is jQuery
$('#emailForm').whatever();
})(jQuery);
You could console.log(window.$,window.jQuery); in firebug to check for both of these problems.
You have mootools-1.2.2-core-yc.js installed as well, and it is conflicting with jQuery.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
$(document).ready(function() {
(function($){
// bind 'myForm' and provide a simple callback function
$('#emailForm').ajaxForm(function() {
var txt=document.getElementById("formReturn")
txt.innerHTML="<p>Thank You</p>";
});
...
$(document).ready is being called against the moo tools library instead of jQuery.
I'm not sure why it would be skipped before, but to avoid the error, wrap the statement(s) that reference $('#emailForm') in an if statement that checks to see if it is present:
if ( $('#emailForm').length ) {
// code to handle $('#emailForm') goes here...
}