We Keep Coding

Javascript not getting loaded

I added a custom jquery function to my wordpress site. The code was to open a popup window on every alternative clicks. This doesn't work if I add to my wordpress theme header.php
This is what I added <script src="/alternateclicks.js"></script>
The js file was added to the wordpress root location public_html. I don't see any popup whatsoever.
jQuery(document).ready(function( $ ){
var canClick = 2;
$("body").click(function () {
if (canClick%2==0) {
window.open("https://example.com/").blur();
window.focus();
canClick = canClick+1;
}
else {
canClick=canClick+1;}
});
});
The solutions I tried, I tried adding the code to footer.php. Didn't work. I added them using wp_enqueue. Didn't work.
UPDATE
In console am seeing that jquery is not defined. But I added the code only in footer.

Seems like, a Plugin interfered with my loading. The plugin disabled jquery.
Found that the code worked in some pages and didn't work in some pages.
Found out using the console.
Then later when disabling the plugin perfmatters, jquery worked fine.

"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");
});

JS/jQuery TypeError: jQuery(...).datepicker is not a function

I've been scratching my head on this for 2 days, pretty sure I'm just missing something simple but I can't for the life of me figure out why it's not working.
I'm trying to use the script below on my WordPress site to disable specific dates within a datepicker field in a ContactForm7 form.
I can load the script in jsfiddle with a simple input field using the same id and it works perfectly...but when I add it to my site the dates aren't disabled, and there's an error in the JS error console that says "jQuery(...).datepicker is not a function"
I've added it in my header.php file, just below the wp_head() call and just above the </head> tag. I've assigned my datepicker field with the id of dpick like the script uses.
I read that this error is commonly caused when using the $ symbol because it can conflict with other jQuery scripts within WordPress...so they suggested replacing $ with jQuery instead (which I've done in the script below)...but I'm still getting the error
var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
jQuery(function() {
jQuery( '#dpick' ).datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
Can't thank you enough for any help you can offer...this seems like such a simple thing but I just can't seem to wrap my head around it!

The are several reasons for this error:
The jquery.ui is used before jquery.
The $ is used by another library.
The jquery lib that is referenced locally(wordpress) has different version from that using jquery.ui.
When the right library and version is referenced the browser cache must be cleared.

I was having the same problem. In my case I had two jQuery script references on my main page (_Layout.cshtml in ASP.NET MVC). I added 1 reference to jQuery at the top but there was 1 at the bottom of the page that I didn't notice... In Firebug this is what I saw:
So as you can see, jQuery UI was sitting in the middle of the conflict! :D This took me some time to figure out.

check if all files are loaded.Should have 200 ok status.

This worked for me, for conflicting jquery codes -
<script>
$.noConflict(); //Not to conflict with other scripts
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({
dateFormat:"yyyy-mm-dd",
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
});
</script>

I know this question is old but may be It can help other people:
The best practice to include js in wordpress is to do it using It's queuing function in the php template:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
(seen here)
It allows to declare the dependencies of your script, in this case, the jquery datepicker. You can check de built-in scripts that wordpress can provide in:
https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress
Wordpress provide dependencies specifically for jquery datepicker so you could include your script with something like:
wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);
Note that if you only declare the jquery dependency you'll get an error like
'jQuery.datepicker(...) is not a function'
since the datepicker functions are not included in the base wordpres jquery.

I don't have much experience with wordpress so I might be out of line trying to help. I have used pickadate though.
In the past I've gotten this error before
Uncaught TypeError: Object [object Object] has no method 'datepicker'
It's usually occurs because I didn't load the js files in the right order. Looking in developer tools on your site I don't see where the pickadate plugin is even loaded. I would check (if you haven't yet) to make sure the plugin is being loaded as well as being loaded in the right order.

Okay , I have the same problem a while ago and the solution to the problem is just to add to include the jquery.ui.datepicker.js it is included in the jquery package. However i am still wondering why I have to include this because Im using jquery.ui before and the jquery.ui.custom or simply the jquery js file will do the .datepicker() function for me.
Anyway it's still nice it now working . Hope this helps.

I moved all scripts from footer to head then things started to work propertly

I know this is an old issue. I had this same issue and it was because of including jquery.min.js along with jquery-1.10.2.js and jquery-ui.js. So by removing jquery.min.js my issue of TypeError: $(...).datepicker is not a function got resolved. Hope it helps to someone.

I had a similar issue but only on firefox browser. We are using require to load the js files. I had following lines in my javascript.
require(['jquery', 'jqueryui'], function ($) {
$(document).ready(function () {
$("#form1").validationEngine({ bindButtons: $(".bindButton") });
$("#txtBidDate").datepicker({dateFormat: 'mm-dd-yy'});
$("#txtInstDate").datepicker({dateFormat: 'mm-dd-yy'});
});
Require loads js files asynchroulsy and the order is not gauranteed unless you define shim config or if your js files are all loaded as AMD. In our case, jquery was loaded after jquery-ui. We defined in main.js for require that jquery-ui has dependency on jquery. This fixed it for us

jQuery & jQuery UI code not running

I have jquery UI and jQuery linked on my page, and I have the following jQuery UI code currently on the page:
$(function() {
$( "#draggable" ).draggable({ containment: "parent"});
});
I want to have this jquery code run below the code above:
function new() {
$("p").append("<strong>Hello</strong>");
}
But for some reason it's not working when both are in the same place and as a newbie to jQuery, I'm not sure what's wrong (both of the codes were mostly copied and pasted from the site). I suspect it's something to do with the function statement.

new is a reserved keyword in javascript (it's used as syntax to create new objects) so you can't use it as a function name. Try using a different name for your function, for example:
function mynew() {
$("p").append("<strong>Hello</strong>");
}

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>