We Keep Coding

jsfiddle - Tutorial demo not working

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

Can't make javascript run correctly

I have a jsfiddle, but I cannot make the javascript run correctly. The fiddle is at http://jsfiddle.net/davidm1181/suW6f/.
The javascript code that is stopping it is the following:
if ($(this).checked()) {
$('.r1').val('true');
}
The problem is, that I have the same code running on my production web server and it works fine, and on my web server if I change checked() to just checked the code will still run, but it will always return true. Can somebody please help me understand this? Thank you.

Explanation of your results:
There is no .checked() function for a jquery object. Therefore, when you call $(this).checked(), it results in the following error being thrown:
TypeError: Object [object Object] has no method 'checked'.
Also, there is no checked property for a jquery object. Therefore, the value of $(this).checked is undefined, which is considered falsy. (You say it always returns true, but I think that is a mistake.)
Correct way to check if a checkbox is checked:
You can use any one of the following:
if (this.checked) {
if ($(this).is(':checked')) {
if ($(this).prop('checked')) {
Which one you use is a matter of style.

JSFIDDLE DEMO
Use
if(this.checked) or if($(this).is(':checked'))
instead of
if ($(this).checked()) {
Code:
$(':checkbox').change(function () {
$('.r1').val(this.checked);
$('.r2').val(this.checked);
});

There is nothing called .checked() in jquery or javascript
you can use
.checked - use with this only
.is(":checked") - use with $(this)
.prop("checked") - use with $(this)
I have generated a fiddle here

When I have to validate if a checkbox is checked I use is(':checked'):
if ($(this).is(':checked')) {
$('.r1').val('true');
}

Very weird jQuery error

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.

Rails Uncaught ReferenceError: $$ is not defined upgrading to jquery

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

Retrieving jQuery.data() values from within setInterval

I've been stuck on this problem for a while now. I'm using jQuery's .data() method to store state in a plugin I'm writing. Everything works fine, except for when I try to retrieve these data values from within a setInterval block. I am able to see the jQuery object inside the setInterval block, but I'm not able to see values stored by the data() method.
tminusStart: function() {
return this.each(function() {
var $tminus = $(this).data("tminus.state", "running");
var intervalId = setInterval(function(tm) {
if ($tminus.tminusIsRunning()) {
$tminus.tminusDecrementCounter();
$tminus.data("tminus.settings").tick_event();
if ($tminus.tminusTimeRemaining() <= 0) {
$tminus.data("tminus.settings").expiration_event();
}
$tminus.text(tminus.tminusTimeRemaining);
}
else {
clearInterval(intervalId);
}
}, 1000, $tminus);
});
}
In the above code, the $tminus does return the jQuery object alright, but the calls to the functions - which are calling the .data() method - return undefined; so does the .data("tminus.settings") call.
Any help in understanding why .data() isn't working here would be greatly appreciated.
Rewrite of function removing cruft:
tminusStart: function() {
var tminus = this;
tminus.data("tminus.state", "running");
return this.each(function() {
console.log(tminus.data("tminus.state")); // "running"
var intervalId = setInterval(function() {
console.log(tminus.data("tminus.state")); // undefined
}, 1000);
});
}
I need to know why it's undefined in the setInterval block

What are tminusIsRunning and tminusDecrementCounter? Did you mean to call that under $tminus? Unless you're extending jQuery, those calls are going to error out. If you're using Chrome, check the Javascript Console, you should see something like: "Uncaught TypeError: Object [object Object] has no method 'tminusIsRunning'"

.data() doesn't work with xhtml + IE (see note in docs).
Alternatively, This looks like a jQ extension, so watch out for that. jQuery has a (IMO) bad habit of aliasing this all over the place. Make sure you don't have a dependency on this being something different than what it is. I suggest installing firebug and using console.log to log this in both the place where you set the value, and where you access it. If it's not the IE issue, I suspect this would locate it.

Finally figured it out. I'm using jasmine to test drive this and the jasmine-jquery library has a fixtures piece which I'm apparently not using correctly. I tested the code in a webpage and everything is now working according to plan. Now I just have to make sure all my tests are passing.
I won't accept my own answer since I didn't provide the necessary information to begin with. I appreciate everyone's time on this. I really wish I could have accepted someone's answer.