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
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 am using the jQuery Seat Chart Plugin in my website.
It's an old website so it uses JavaScript but this plugin is in jQuery so I am getting an error on the following jQuery code
function recalculateTotal(sc) {
var total = 0;
//basically find every selected seat and sum its price
sc.find('selected').each(function () {
total += this.data().price;
});
return total;
}
The error in console I get is Uncaught TypeError: this.data is not a function which I am guessing conflict error with JavaScript and jQuery.
When I use following code
sc.find('selected').each(function () {
total += jQuery(this).data().price;
});
It throws following error Uncaught TypeError: this._each is not a function with 'prototype' javascript.
I have tried to create a new extended function, tried to change the javascript versions but I am not able to solve the error.
jQuery is a Javascript library, it's not a different language so there is no conflict there.
I see you're using jQuery's .each() with sc.find('selected') so the issue must be there:
find('selected') will select elements with selected html tag, which I doubt is what you want. you should use .selected if you're selecting elements with that class. or #selected if you have 1 element with said id. more about .find()
if you're trying to get you get .data() from a jQuery selected element selected you should do it like this this.data("price")
if you're trying to get seatCharts's data() make sure you used .seatCharts({}) on your sc element or you won't have the data() function there
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
So I had code that was working properly on my site:
$("#usr").load("somepage.php",{var1:var1,var2:var2});
But ever since I changed some code in the navigation bar, jQuery has been acting really strangely. The first major problem was that this line:
var w = $(window).width();
returns the error: object [global] has no method "width()"
And that didn't seem to matter, as all elements on the page functioned with that error (as if it was still being executed, because elements were still being placed)...but then I came to the page that implemented the first line of code, and I ran into the following error:
Cannot call method "load()" of null
Sure enough, I checked the console, and $("#usr") returns null, but I can see the HTML line in the page with the inline id of usr.
This causes a problem because I need to load data from that page for the page to function properly. But it gets even stranger. I thought I would just try a plain post request and take the data and use document.getElementById("usr").innerHTML = ... as a substitute, but I get the following error from this line:
$.post("somepage.php",{var1:var1,var2:var2},function(data){
document.getElementById("usr").innerHTML = data;
});
Error:
Uncaught TypeError: Object function $(el){if(!el)return null;if(el.htmlElement)return Garbage.collect(el);if([window,document].contains(el))return el;var type=$type(el);if(type=='string'){el=document.getElementById(el);type=(el)?'element':false}if(type!='element')return null;if(el.htmlElement)return Garbage.collect(el);if(['object','embed'].contains(el.tagName.toLowerCase()))return el;$extend(el,Element.prototype);el.htmlElement=function(){};return Garbage.collect(el)} has no method 'post'
What the heck is going on with jQuery?
I'm importing 1.8.2 from googleapis
That sounds a lot like you're loading Prototype or MooTools or something as well as jQuery, and so Prototype/MooTools/whatever is taking over the $ symbol.
If that's what's going on, and you need the other library, you can use jQuery.noConflict(). Then you either use the symbol jQuery instead of $ for your jQuery stuff, or you put all of your jQuery code into a function that you pass into jQuery.noConflict and accept $ as an argument, like so:
// Out here, $ !== jQuery
jQuery.noConflict(function($) {
// In here, $ === jQuery
});
Or you can just do it yourself:
// Out here, $ !== jQuery
jQuery.noConflict();
(function($) {
// In here, $ === jQuery
})(jQuery);
ready also passes the jQuery object into the function, if you're already using ready.
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...
}