How come this code throws an
Uncaught ReferenceError: $ is not defined
when it was OK before?
$(document).ready(function() {
$('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
$('#featuredvid > ul').tabs();
});
Results in tabs don't close anymore.
jQuery is referenced in the header:
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>
You should put the references to the jquery scripts first.
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>
You are calling the ready function before the jQuery JavaScript is included. Reference jQuery first.
This is what solved it for me. Originally I went to Google and copied and pasted their suggested snippet for jQuery on their CDN page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The snippet does not include the HTTP: or HTTPS: in the src attribute but my browser, FireFox, needed it so I changed it to:
edit: this worked for me with Google Chrome as well
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then it worked.
If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur. So, always keep your own JavaScript or jQuery code after calling the jQuery plugin so the solution for this is :
First add the link to the jQuery file hosted at GoogleApis or a local jQuery file that you will download from http://jquery.com/download/ and host on your server:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
or any plugin for jQuery. Then put your custom script file link or code:
<script src="js/custom.js" type="text/javascript"></script>
In my case I was putting my .js file before the jQuery script link, putting the .js file after jQuery script link solved my issue.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>
Add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
Jquery
If you want any other Jquery cdn version check this link.
After this:
<script type="text/javascript">
$(function(){
//your stuff
});
or
$(document).ready(function(){
//your stuff
});
</script>
Wordpress:
<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
//your stuff
});
</script>
Okay, my problem was different - it was Document Security model in Chrome.
Looking at the answers here, it was obvious that I was somehow not loading my jquery files before calling the $(document).ready() etc. functions. However, they were all in the correct positions.
In my case, this was because I was accessing the content over a secure HTTPS connection, whereas the page was trying to download the CDN hosted data from google, etc. The solution was to store them locally and then include then directly rather than from the CDN each time.
Edit: The other way of doing this is to link to all the CDN-hosted stuff as https:// rather than http:// - then the model doesn't complain.
You are calling the ready() function before the jQuery JavaScript is included. Reference jQuery first.
If you're in ASP.NET MVC, you can specify when your JS code should be rendered, by doing this:
1, In your page.cshtml wrap your <script> tag into a section, and give it a name, the common name to use is 'scripts':
#section scripts {
<script>
// JS code...
</script>
}
2, In your _Layout.cshtml page add #RenderSection("Scripts", required: false), make sure to put it after you reference the Jquery source, this will make your JS code render later than the Jquery.
Add jQuery library before your script which uses $ or jQuery so that $ can be identified in scripts.
remove tag script on head and put end bady
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
then first write script in file js add
/*global $ */
$(document).ready(function(){ });
If it's in wordpress, might be needed to change
$(document).ready(function() {
to
jQuery(document).ready(function($){
or add
var $ = jQuery;
before
$(document).ready(function() {
I had the exact same problem and none of these solutions above helped.
however, I just linked the .css files after the .js files and the problem miraculously disappeared. Hope this helps.
In my case I had this referenceError as the order of script calls was wrong. Solved that by changing the order:
<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>
to
<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
I wanted to try to make my script asynchronous. Then I forgot about it and when I went live the [custom].js file only loaded 50% of the time before the jQuery.js.
So I changed
<script async src="js/script.js"></script>
to
<script src="js/script.js"></script>
I had the same problem , and I solved by putting jQuery at the top of all javascript codes I have in my code.
Something like this:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>
Hope can help some one in future.
put latest jquery cdn on top of your main html page
Like If your main html page is index.html
place jquery cdn on top of this page like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>This will hide me</h2>
<button>Click me</button>
</body>
</html>
Include the jQuery CDN (or jQuery ref) in the index file first. before including your JS file to ensure we are accessing the jQuery.
following lines worked for me
Can get a clear idea about this by referring to the following link
reference site:
https://www.tutorialrepublic.com/faq/how-to-fix-dollar-is-not-defined-error-in-jquery.php
Answer: Execute Code after jQuery Library has Loaded
The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.
In my case it was a typo, I forgot a backslash and was referencing the source incorrectly.
Before src="/scripts/jquery.js"
After src="scripts/jquery.js"
If you are doing this in .Net and have the script file referenced properly and you jQuery looks fine, make sure that your users have access to the script file. The project I was working on (a coworker) had their web.config denying access to anonymous users. The page I was working on was accessible to anonymous users therefore they didn't have access to the script file. Dropped the following into the web.config and all was right in the world:
<location path="Scripts">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
The source file jquery-1.2.6.min.js is not called the jQuery command $() is executed earlier than <..src='jquery-1.2.6.min.js'>.
Please run <.. src="/js/jquery-1.2.6.min.js.."> at first and make sure the src path is right, then execute jquery command
$(document).ready(function()
This happened to me before.
The reason was that I'm connecting android to a webview with a JS. And I sent a parameter without quotes.
js.sayHello(hello);
and when I changed it to
js.sayHello('hello');
it worked.
The error will occur in the following two scenarios as well.
#section scripts element is missing from the HTML file
Error in accessing DOM elements. For example accessing of DOM element is mentioned as $("js-toggle") instead of $(".js-toggle"). Actually the period is missing
So 3 things to be followed - check required scripts are added, check if it is added in the required order and third syntax errors in your Java Script.
I had similar issue. My test server was working fine with "http". However it failed in production which had SSL.
Thus in production, I added "HTPPS" instead of "HTTP" and in test, i kept as it is "HTTP".
Test:
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );
wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );
Production:
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );
wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );
Hope this will help someone who is working on wordpress.
Your JavaScript file is missing so this error occurred. Just add the JavaScript file inside the <head> tag. See the example:
<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />
or add the following code in tag :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
In my case i forgot to include this :
<script src ="jquery-2.1.1.js"></script>
Earlier I was including just jquery-mobile which was causing this error.
I modified the script tag to point to the right content and changed the script order to be the right one in the editor. But totally forgot to save the change.
Doh! I had mixed quotes in my tags that caused the jquery reference to break. Doing an inspect in Chrome allowed me to see that the file wasn't properly linked.
You have not referenced a jQuery library.
You'll need to include a line similar to this in your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I had a similar issue and it was because I was missing a closing > on a style sheet link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="local_xxx.js"></script>
I have similar issue, and you know what, it's because of network is disconnected when I test in android device webview and I don't realize it, and the local js no problem to load because it doesn't need network. It seems ridiculous but it waste my ~1 hour to figure out it.
if you are laraveling that error comes on in blade files when you forgot to surround the code with :
#section('section name')
.......
#endsection
I've got html site with little help of css.
I Never tried to use javascript, but I found one that called simplr-smoothscroll which requires jQuery Mouse Wheel Plugin.
When I downloaded both of them I got jquery.mousewheel.js and jquery.simplr.smoothscroll.js. When I searched google how to install them in my site, I found that I need to put them in the site directory and refer to them in the html like this:
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.simplr.smoothscroll.js"></script>
I did that and nothing happened. What should i do?
PS: there are some tips which i really don't understand in the github links of the project :)
You also need to include jQuery itself for those libraries to work.
You can download jQuery as well and put it there, on the top of the other two, or you can reference it from a CDN.
Most of the libraries require you to write some codes as well. You can read their documentation and see how you can use them.
simplr-smoothscroll for example, you need to add the code below to your page and put your configuration inside in order to get it to work.
<script>
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
</script>
First of all, you should put your jquery.mousewheel.js and jquery.simplr.smoothscroll.jsin js folder which is same hierarchical level with your index.html.
Second, did you add the JavaScript which is provided in your link?
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
you should add this between <script> ... </script>.
Include jquery js file first .here using cdn path you can download latest version and give accpording path
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Then include mousewheel js
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
Include mooth scroll js
Use Follwing code:
<script type="text/javascript" charset="utf-8">
$(function () {
$.srSmoothscroll()
})
</script>
You can set option also ,refering to document :
https://github.com/simov/simplr-smoothscroll
Folks,
I am new to wordpress. I am converting a html template to wordpress.
THE script is this:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
And the javascript functions are:
<script>
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
var obj = window;//$(window);
console.log(obj.length);
console.log("selector" in obj);
</script>
<script>
function toCell(px,py,ok) {
$("#tab1").find('tr').eq(py).find('td').eq(px).addClass((ok)?'testok':'testko');
};
$(window).load(function() {
$("#div1").html($("#div1").html()+' '+nice.version);
$("#div2").html($("#div2").html()+' '+navigator.userAgent);
toCell(1,1,nice.detected.ismozilla);
toCell(2,1,(nice.detected.prefixstyle=='-webkit-'));
toCell(3,1,nice.detected.isie);
toCell(3,2,nice.detected.isie10);
toCell(3,3,nice.detected.isie9);
toCell(3,4,nice.detected.isie8);
toCell(3,5,nice.detected.isie7);
toCell(3,6,nice.detected.isieold);
toCell(4,1,nice.detected.isopera);
toCell(5,1,nice.detected.isios);
toCell(5,2,nice.detected.isios4);
toCell(0,8,nice.detected.cantouch);
toCell(3,8,nice.detected.hasmstouch);
toCell(1,10,nice.detected.hastransform);
toCell(1,11,nice.detected.hastranslate3d);
toCell(2,10,nice.detected.hastransition);
toCell(2,11,!!nice.detected.transitionend);
toCell(3,10,nice.hasanimationframe);
toCell(3,11,nice.hascancelanimationframe);
toCell(1,12,nice.detected.hasmousecapture);
toCell(2,12,((nice.detected.cursorgrabvalue!='')&&(nice.detected.cursorgrabvalue.substr(0,3)!='url')));
});
</script>
I know about registering, enqueuing but how will it can be transformed into wordpress theme.
Explain
Technically you can include JavaScript files in the <head> just like you would on a normal website. but registering and enqueuing is the preferred mechanism for WordPress.
You could also put your <script> directly in the header.php which would make it available on all pages. However, I would strongly suggest you make it an external script.
Depending on how you enqueue the the file, it will be added to your site header or footer with wp_head() and wp_footer() respectively.
I'm having trouble implementing Pagify in Wordpress.
First I tried this tutorial to register the script in function.php. It worked, the pagify.js is included, and the jQuery too. FYI, I'm using wp-foundation themes, its has built-in jQuery.
and then I put the script to call pagify in the header.php before wp_head() and also i try after wp_head():
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or null for an empty div
});
I created HTML just like in pagify tutorial, and my div container id is also named page_holder. but it doesn't work.
Second I tried to register the script above to function.php, but still didn't work.
Third, I modified pagify.js, add noConflict() but still not work.
I am always facing issues with adding jquery scripts to my WP sites and still don't find a general way to resolve them, so I do like you, I try the different possibilities: nonConflict, register scripts and enqueue them, call them in simple script tags before wp_head or before wp_footer in header.php and footer.php respectively....
The last situation was to try to implement the Tag-it jquery plugin with my wordpress site and I resolved it by calling the script in my footer.php (I tell you beacause you didn't mention you tried this option in your question).
Example with Tag-it plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTags").tagit(
{
fieldName: "tages[]"
}
);
});
</script>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
This is my first time using wp_enqueue_script for an IDX solution that I am trying to setup on a WordPress site. My file path is child-theme/js/idx.js
I placed this code in my functions.php file:
<?php
function wptuts_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/idx.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' ); ?>
and this code in my idx.js file:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript" ></script>
<script src="http://tools.example.com/scripts/postmessage.min.js" type="text/javascript" ></script>
<script type="text/javascript" >
$.createDynamicFrame('http://example.example.com', 'http://example.example.com/26611/Carets/search?parentUrl=' + encodeURIComponent( document.location.href ), 'MapSearch');
This does nothing. When I use the wptuts_scripts_with_jquery()function in the functions.php with other scripts it seems to work but not with the idx.js script. Any help would be really appreciated.
Thanks!
I don't know why you are trying to include <script> tags inside an external resource but this all wrong - they should only ever contain pure javascript (this is what the browser is already expecting).
Your idx.js file should contain only this line: $.createDynamicFrame(...
Onto the reason why this erroneous file isn't being included though - the array you pass as a parameter when queueing scripts in Wordpress is a list of dependencies. I'm assuming that since you were trying to include jQuery inside your JS file - then it hasn't been previously loaded by the template? In which case, because you haven't enqueued jQuery - "custom-script" doesn't have all the required components so it doesn't get pushed onto the page.
By default wordpress already has a version of jQuery registered - if for CDN preference (or backwards comatibility sake) you need to use a different version then you should wp_deregister_script and re-enqueue it with your desired version. Otherwise your function should look like the following:
function wptuts_scripts_with_jquery(){
$path = get_template_directory_uri();
wp_enqueue_script('jquery');
wp_enqueue_script('custom-script', "{$path}/js/idx.js", array('jquery'));
}
Since nothing exists at tools.example.com/scripts/postmessage.min.js I have left this out. Also note that you can register and enqueue in a single wp_enqueue_script statement.