We Keep Coding

"TypeError: $ is not a function" after loading some scripts into wordpress

We start to provide a HTML-Snippet like Google or Facebook does for its advertising things or the integration for the Facebook like button. It contains a business application.
Our HTML-Snippet loads a script and contains a few more informations:
<div id="ncc" data-hash="" ng-jq>
<div id="wiz" ng-controller="WizardCtrl"></div>
<script src="{{URLTOSCRIPT}}/load.js"></script>
</div>
The script checks if a jQuery is installed and loads all related things into the DOM and at the ends inits an angular-Application.
All this works fine on pages that havn't enabled jQuery.noConflicts-Mode.
After the latest Wordpress-Updates we got an ERROR
"TypeError: $ is not a function"
We tried to get rid of it using some workaroungs like
jQuery(document).ready(function($){
$(function () {
//code to execute
});
OR
jQuery(document).ready(function(){
var j = jQuery.noConflicts();
j(function () {
//code to execute
});
and changed also all references in the angular-part. But nothing working really well.
Any suggestions?
We are using AngularJs v1.4.7, jQuery v1.11.3 (started to migrate to 2.1.4), the

Sometimes when more versions of jQuery are loaded or if it conflicts with another library you can get that error:
have you tried to replace in all of your code the $ symbol with the word "jQuery"?
So your example would become:
jQuery(document).ready(function(){
jQuery(function () {
//code to execute
});
Note: I don't think that in this case passing "$" as a parameter is needed anymore ;)
EDIT: there is also another possibility:
you say that you're using the $ sign (i guess to avoid the usual conflicts in wordpress) in this way:
jQuery(document).ready(function($){
$(function () {
//code to execute
});
But this will make the $ symbol available only inside the ready() function.
Did you check if you have somewhere code using the $ where you actually aren't allowed to (or in other words if you have any piece of your js code where $ isn't mapped as "jQuery")?
EDIT 2: The only working solution in the end was:
(function($,undefined){
$(document).ready(function(){
//code to execute
});
})(jQuery);"

Make sure jQuery is loaded before any other script that uses certain jQuery functions.

Normally those errors arise, when the jQuery library wasn't loaded yet. Make sure that a $()-call is called after jquery was loaded, which normally happens at the end of your file to speed up loading times.
Therefore putting
<script src="{{URLTOSCRIPT}}/load.js"></script>
to the end of the body-tag should help.

Usually when you get this error: "TypeError: $ is not a function"
it means, you a missing a JQuery library or they are not placed in the correct order. Ordering JQuery libraries is important.

$ is not a function. It means that there is a function named $, but it does not have a plugin/widget named selectable. So, something has stolen your $ or there is another library added after it, or it was never loaded.

Your script file is not loading properly or script file is not available.
open browser inspect element and put this code
jQuery().jquery.
it's display which jquery version is use.
this is for testing
jQuery(document).ready(function()
{
alert("test");
});

Fixed Floating Elements jQuery Wordpress

I have added this code to my site (without all the stuff to set up the comments and headers): http://jsfiddle.net/WzLG2/3/ Below is the javascript.
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('#smi').addClass('fixed');
} else {
// otherwise remove it
jQuery('#smi').removeClass('fixed');
}
});
});
My site: http://hollyshelpings.com
I'm trying to get the brown box underneath my header to scroll to the top and then stop there like in the jsfiddle. I'm using thesis and I have jquery enabled. I have wordpress and I already looked up how to use jquery in wordpress with replacing $ with jQuery.
I got the basis for the code from this site: Jquery for designers (it won't let me post the link)
I tested and jquery appears to be loading, I used firebug and I'm not seeing errors that pertain to this code (it looks like some plugins may have errors, however). I'm pretty new at coding so I'm not sure what else to test or how to troubleshoot much past this. My end goal is to use this for my social media icons instead of the tabs on the side. Any guidance or suggestions are greatly appreciated.

First step is to check your javascript console and remove any errors you see coming up there, as they can cause problems elsewhere. Not saying it's related, but your call to jQuery('#commentluv') is broken. I also notice you're using jQuery 1.4.2 which is really old, and should consider upgrading (maybe not to version 2 as that changed a lot, but at least to 1.9, maybe 1.10).

button in jquery and jscript

I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body

jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle

jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});

If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.

Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/

For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.

Uncaught ReferenceError: $ is not defined? Jsfiddle

I'm a beginner at javascript and i have used jsfiddle to create a navigation bar which appears when the user has scrolled down.
When i copy the code to dreamweaver it no longer works?
I have researched and it said something about adding the jquery framework or something?
Or is there a way to do this without the framework?
Link to jsfiddle for full code: http://jsfiddle.net/fNn7K/270/
javascript :
$(window).on('scroll', function () {
console.log($(this).scrollTop());
if ($(this).scrollTop() > 50) {
$('.nav').addClass('visible');
}else if ($(this).scrollTop() <= 50 && $('.nav').hasClass('visible')) {
$('.nav').removeClass('visible');
}
});

Without jQuery you can do :
window.onscroll = function() {
var display = document.body.scrollTop > 150 ? 'inline' : 'none',
elems = document.getElementsByTagName('nav');
for (var i=0; i<elems.length; i++) {
elems[i].style.display = display;
}
}
FIDDLE

When i copy the code to dreamweaver it no longer works?
JS Fiddle assembles a page based on several pieces of user entered data. One of those pieces of data is the selection of a library.
You have to copy the code to the right places in the document and include the same libraries.
Even then, the preview modes of Dreamweaver might not show it up, because they are (or at least were) entirely awful. Do you testing in a real browser.
I have researched and it said something about adding the jquery framework or something?
You need the jQuery library to use jQuery methods, yes.
Or is there a way to do this without the framework?
jQuery is just some JavaScript written by other people. You can reproduce anything it does. A line by line rewrite of your code to not use jQuery would be out of scope for a stackoverflow answer though.

you need to add jquery.js file in your code (dreamweaver)..
add this in between <head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
in the fiddle you provided, the jquery is already loaded..so you didn't get that error.
and don't forget to wrap your code inside document.ready function (which is again, already added in fiddle)..
$(function(){
$(window).on('scroll', function () {
.....
});
});

mootools and jQuery conflict

I've got a simple form in a page that is loading Mootools and JQuery. JQuery is in no conflict mode, which seems like it ought to cause no problems.
There's a form element called "name"--
<input class="required" id="sendname" name="sendname" value="">
And I'm trying to attach a click event to it using Mootools to update something else when the name box is clicked:
$('sendname').addEvent('click', function(e){
// do stuff.
});
The problem is that the click event never gets added.
This error appears on load:
Uncaught TypeError: Cannot call method 'addEvent' of null
When I try to interact with the element in a js console, I get the following error:
> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>
EDIT: the previous was fixed by loading a newer Mootools. However, the click event still isn't functioning properly, though it throws no errors or warning.
This code works fine in almost any situation I've used it in. I assume there's some issue with jQuery conflicting, but the fact that the $ notation works seems to confirm that noConflict mode is operational. Any ideas?

You are targetting the element wrongly... I think this has nothing to do with a possible conflict.
In this case you need to add the hash for an id or a period for a class, like this:
$('#sendname').addEvent('click', function(e){
// do stuff.
});
Notice the # in #sendname

MooTools has Dollar Safe mode that automatically releases the $ to other libs as long as MooTools is loaded last.
If Dollar Safe mode is active, you need to use:
document.id('SomeElementID').someMethod()
What is happening in the example you are giving, is that you're using jQuery to select the element, and a MooTools method on the result. The thing is, jQuery returns the jQuery object which has no such 'addEvent' method on it. MooTools works on the actual elements so you need to select them with a MooTools query method first: $ == document.id or $$ == document.search
You can cache document.id to a var for convenience if you want:
var $M = document.id;
$M('sendname').addEvent(...)

As described in the comments to the OP, the issue was the load-order of the jQuery/Mootools scripts. The jQuery noConflict was being loaded too late, and causing problems. Please see jsfiddle -- http://jsfiddle.net/uSwzL/1/

Without any problem even loading jquery.js after other $ based library loaded:
<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim(' hello '));
</script>
Even in php framework html template:
<script>
function on_doc_ready()
{jQuery(function($)
{$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}
);
}
function load_jquery_ui()
{var s2=document.createElement('scr'+'ipt');
s2.setAttribute('onload', 'on_doc_ready();');
s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
document.getElementsByTagName('head')[0].appendChild(s2);
}
function load_jquery_after_mootools()
{var s1=document.createElement('scr'+'ipt');
s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
document.getElementsByTagName('head')[0].appendChild(s1);
}
load_jquery_after_mootools();
<script>