Anonymous Function Error: $ is not defined - javascript

Google Developer Tools is displaying the following error when my PHP page uses the content from a javascript file (my_scripts.js):
"Uncaught ReferenceError: $ is not defined scripts.js:1 (anonymous function)"
Content of my_scripts.js
$('a.button').click(function(){
window.location.href = "another_page.php";
});
The page and the script work as required. Clicking the element links to the requested page, but the error is there.
1) What causes the error?
2) Can it or should it be ignored?

1) It looks like your problem is that jQuery haven't been loaded.
Make sure you load jQuery before scripts.js.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
2) Errors should never be ignored.

You need to load jquery libary BEFORE! Please download the jquery.min.js at http://www.jquery.com/download/
also, write like this:
$(doucment).ready(function(){
$('a.button').on('click',function(){
window.location.href = "another_page.php";
});
});

If you have already included jQuery on your file, and still its not working you should try,
jQuery(doucment).ready(function(){
jQuery('a.button').on('click',function(){
window.location.href = "another_page.php";
});
});
This is causing as there might be some conflicting js files.

Related

How to load HTML file when using the windows timeout function?

So I'm trying to load my homepage HTML file after it a certain time frame. This is what I have right now:
reply.file('./views/afteradd.html');
setTimeout( function(){
window.location.href= "views/add.html";
}, 1000);
I want to load my add.html file after certain period however when I try to create a path to the my file I get an error. I have tried window.location and tried *.href. I'm pretty new in Java Script so it might be a really simple error im not finding.
The error I'm getting is:
"Debug: internal, implementation, error
ReferenceError: window is not defined"
If your add.html is not present in root location then please give full path in href
For this please try below code :
<script>
setTimeout(function(){window.location.href='http://yourdomainname/views/add.html'},1000);
</script>
And for home page add only '/'
<script>
setTimeout(function(){window.location.href="/"},1000);
</script>
Hello try with this.
<script>
var change_path = function(){window.location.href="/"};
setTimeout(change_path ,1000);
</script>

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

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,
);

Conflicting Javascript codes. Menu and Slider

I am having some trouble with what looks to be conflicting JavaScript. I'm not the most savvy with it so I was hoping someone here could help me out.
The slider and menu both work on their own in a separate HTML page, but once I place it into the same HTML page it seems that they conflict and neither then work.
I have removed the menu JavaScript code in the head and the slider works so I am pretty sure this is the problem. You can see it live here.
You console show error
Uncaught ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js:140
Uncaught ReferenceError: jQuery is not defined jquery.themepunch.kenburn.min.js:8
Uncaught TypeError: Property '$' of object [object Object] is not a function commercial.html:32
Embed a suitable jQuery library file at the top of all the scripts
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
First of all, you have to include JQuery before you start to use the plugins, so move the line:
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
Before all your JavaScript includes.
Also, you use jQuery.noConflict() and we know that it "frees" the $ from being associated with jQuery so change this code:
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.bannercontainer').kenburn(
//Etc...
And use the $ sing everywhere.
$(document).ready(function() {
if ($.fn.cssOriginal!=undefined)
$.fn.css = $.fn.cssOriginal;
$('.bannercontainer').kenburn(
//Etc...

TypeError: $.datepicker is undefined

my javascript has code, for one of the pages on my website:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...
this runs fine, when the page on which id="nmdt1" is loaded.
And I load the related datetimepicker js library (module) only on when i load that page.
so far so good.
but when i load any other pages on my websit i get this error: from the line number where dateformat is defined.
EDIT: here is the correct error for firebug log:
TypeError: $.datepicker is undefined
http://myswbsite/jscript/myjsscript.js
Line 569
line 569 is:
dateFormat: $.datepicker.ATOM,
and yes, this error only comes on page where I am not loading the related js code (jquery-ui-timepicker-addon.js). The reason I am not loading this js on every page is, i need it on only one page.
MORE DETAILS:
in HTML header following lib loads (in seq)
<head>
<script src="/jscript/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jscript/myjsscript.js" type="text/javascript"></script>
...
...
<script type="text/javascript">
jQuery(document).ready(function(){
var mid = "[% mid %]";
alert('mid='+mid);
$(".bvmainmenu #"+mid).css({"background":"url(/images/current-bg.gif) top left repeat-x", "color":"#ffffff"});
});
</script>
</head>
this last javascript code you see above (bottom of header) does not run each time when the jquery-ui-timepicker-addon.js lib is not loaded (and you see that err in firebug - i can live with error, but why this last code is not running, i am not sure). I am not able to understand why this routine wont run just because i did not load one 'add-on' library
the page which runs everything correctly loads following js scripts in BODY
<script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
on this page the last javascript code you see in header also loads and displays the alert!
I am having tough time to figure this.
Have you included jQuery UI in your application.
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
Make sure that $ is your jquery shortcut identifier. Check the usage of
var $J = jQuery.noConflict();
In that case try to use $J.datepicker
You seem to be saying that this code:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...is within your common myjsscript.js script that is loaded on every page. If so, that means it runs on every page and thus you get an error on pages that don't also include the extra plugin scripts.
The code I've quoted above does not mean "If an element with that id exists call the datetimepicker() method", it means "Create a jQuery object that may or may not have any elements in it and then call the datetimepicker() method, passing an object with a property set to $.datepicker.ATOM." That is, even if there is no nmdtd1 element on the page it will still call datetimepicker and still reference $.datepicker.ATOM.
There are at least three ways you can fix this:
Move that code out of the common myjsscript.js and just put it on the one page that needs it.
Go ahead and include the plugin JS files on all the pages on your site - they'll be be cached by the browser, so it's not really a performance hit assuming your users visit several of your pages anyway.
Move that code within a conditional so the .datetimerpicker() part is not executed unless needed.
For option 3:
var $nmdt1 = $('#nmdt1');
if ($nmdt1.length > 0) {
$nmdt1.datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
});
}

Categories