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.

Resolve the not a function error in the webpage

This is a screenshot of the error from Developer console in browser:
Now, I understand that the error occurs because .suggest() is not a function but it is being called in ajax.js?ver=1.6.5:1287. I don't fully understand what the errors information provided below that means. The lines i etc. Am I supposed to find the .suggest() function in jquery.js?ver=1.12.4-wp:2?
Here is the code from ajax.js:
jQuery(document).ready(function ($) {
$('#wpf_tags').suggest(
window.ajaxurl + "?action=wpforo_tag_search",
{ multiple:true,
multipleSep: ",",
resultsClass: 'wpf_ac_results',
selectClass: 'wpf_ac_over',
matchClass: 'wpf_ac_match',
onSelect: function() {}
}
);
// More code
This is from a WordPress plugin which works fine with the default 2019 theme. However, it throws up the error when I use it with a theme I created. I am loading jQuery version 3.3.1 in the footer of my theme. Can this be the reason for the above error?
Thanks.
UPDATE
I added the plugin to the footer of the webpage but the error still did not disappear. After that I looked at the source code of the page by pressing Ctrl + U. This showed me that the problematic file ajax.js loads on line 102. However, the suggest plugin loads on line 515.
I have no control over the source code on that page because it is generated by the WordPress plugin. How can I load these files in proper order?
Thanks.

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

jQuery Cycle With Rotate not working with Bootstrap

I had implemented this jQuery Cycle with Rotate and Tabs in a previous application and it ran without any problem because the rotate method was included within jQuery UI. My previous app used jQuery 1.6
Now I am trying to implement this in a .NET application that is Bootstrap enabled, I'm using jQuery 1.11.2 and Bootstrap 3.
There is an issue because rotate method has been removed from jQuery UI Tabs.
So I added jquery-ui-tabs-rotate.js
Chrome Console shows 2 errors:
1. Cannot read property 'tabs' of undefined from rotate
2. Another issue is: $(...).tabs is not a function
$("#featured > ul").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 5000, true);
Here is the Test Page
I also tried to add the latest Cycle CDN which didn't fix the problem:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
I was wondering if anyone knows why this jQuery Cycle Tabs isn't firing?
I simplified the Code, removing the other JavaScript made no difference:
$(document).ready(function () {
$("#featured > ul").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 5000, true);
});

It looks like the rotate method has been removed from jQuery UI Tabs, as you can see by this error message appearing in the console of your page:
Uncaught Error: no such method 'rotate' for tabs widget instance
Doing a search reveals that this method was removed from jQuery UI Core. It looks like you can implement a third-party extension to fix this.

Error on thr page jQuery(...).on is not a function

I am creating my first yii framework project. I am using cgridview in my project. When I load the page an error is showing in the console. The error is coming from a Javascript code generated by cgridview.
error is
TypeError: jQuery(...).on is not a function
jQuery(document).on('click','#items-grid a.delete',function(){
My javascript is
/*<![CDATA[*/
jQuery(function($) {
jQuery(document).on('click','#items-grid a.delete',function(){
confirmDelete(this);
return false;
});
jQuery('#items-grid').yiiGridView({'ajaxUpdate':['menuitems- grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'items_page'});
});
/*]]>*/
What Kind of issue this is. I have included jquery.js latest vertion in my header. I tried older version also but this error is same. How should I fix this error?

You may need to disable Yii's build-in JQuery and use your own version of JQuery. To disable Yii's built-in JQuery put the following lines into your view and load your own JQuery with avoiding conflicts:
Yii::app()->clientScript->scriptMap=array(
'jquery.js'=>false,
'jquery.ui.js' => false,
);