In my project every page loads a cdn jquery script. some use $ and some use jquery. and now I have to use my new script file 'myNewScript.js' in every page.
If I write my function like $(function (){}) it gives error on some pages like
$ is not function
and if I write function like this jquery(function (){}) then it also give error on other page like
jquery is not a function.
I want to know can we use both $ and jquery as variable . like in same script file say 'myNewScript.js' I want to write $(function (){}) and jquery(function (){}).
Every thing is dependent on each other so I can't reverse the loading of the script. I can't think of any solution...
jQuery should always be available using the name jQuery (note the uppercase Q). So use that:
jQuery(function (){})
You can also wrap your code in an IIFE if you would like to refer to jQuery as $ while dealing with the uncertainty whether the global $ actually refers to it:
(function ($) {
$(function () {
// on ready stuff
});
})(jQuery);
Define jQuery locally for yourself by looking for both variables.
var myJquery = jquery || $;
Related
Im converting a website in blazor,
i have a page where at the end ther's this javascript
(function ($) {
"use strict";
$(document).ready(function () {
$('#slider-range').slider({
..... more
How can i call it in blazor?
I did not find a solution that works
Thanx
Yes it can work, the problem is blazor does not understand $ jquery selector, you need to replace it with document in .js script for it to work.
for example,
change $('#slider-range').slider({ to document.getElementById('#slider-range').slider({ then this line will work and same for everyplace where $ is present. And just remove it from function definition like this (function () {
$(document).ready(function(){
$(".showhide").click(function(){
$("nav").slideToggle("slow");
});
});
I'm not a JavaScript programmer. I'm getting this error: Uncaught TypeError $ is not a function
For some reason my navigation is not working.
Someone told me to put this in JavaScript but I'm getting the error.
Found this: jQuery(document); but don't know how to use this.
This is how you should do it specially on WordPress (since Wordpress is usually using jQuery instead of $)
(function($){
$(document).ready(function(){
$(".showhide").click(function(){
$("nav").slideToggle("slow");
});
});
})(jQuery);
Reference here
or if you don't like the answer above, you can add var $ = jQuery; before the $(document).ready function
The issue is that WordPress uses jQuery in compatibility mode, which means that it does NOT utilize the $ by default.
You CAN use the $ to access jQuery, but you just need to wrap it in a document ready function.
Here's the simplest way to do this:
// By passing the $ as a function argument, $ is available anywhere inside this document ready function
jQuery(function($) {
// Do all your $ jQuery goodness in here...
$(".showhide").click(function(){
$("nav").slideToggle("slow");
});
// $ is available until the end of the document ready
});
// Outside of the document ready function - now you cannot use $ - you'd have to use jQuery....
jQuery('.showhide').click(....);
For completeness sake, be sure you have enqueued jQuery.
In your theme's functions.php file, or in your plugin's main file, add this:
function theme_name_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
This ensures that jQuery is loaded - the right way - in your WordPress site.
You should use jQuery instead of $ if you still gets the error do as following.
var j = jQuery.noConflict();
j(document).ready(function(){
j(".showhide").click(function(){
j("nav").slideToggle("slow");
});
});
In jQuery doc we have such code:
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
I wonder how this works, Why libs like other_lib.js that uses jQuery's $ works after $.noConflict();. They should not work because global variable $ were removed from global scope.
Thank you.
It is not just that it works after the noConflict call, more importantly if you look at the document ready function it is taking in a variable named $ what jquery is doing when it calls this function is passing in the named jQuery object, which becomes $ in that function's local scope.
Outside of that function calls to $ will not work.
I have done this manually with some self executing javascript in the past and it follows the same pattern:
(function($){
...some page startup code here...
})(jQuery)
I have assigned jQuery.noConflict() to $jq:
var $jq = jQuery.noConflict();
Now I want to edit a jquery plugin to use $jq. There are a lot of codes in the following style:
(function($) { /* some code that uses $ */ })(jQuery)
Changing $ to $jq doesn't solve the problem. What should I do?
You don't need to do anything. The $ is a variable local to the function that wraps the plugin; it's immediately assigned to jQuery, as you can see after the function literal:
})(jQuery) // Immediately calls the wrapper function with jQuery being passed
// as the $ argument.
I'm writing my own Drupal 7 module, and like to use JQuery in it.
$('#field').toggle();
But I'm getting this error:
TypeError: Property '$' of object [object DOMWindow] is not a function
It seems that JQuery is not loaded. Otherwise $ should be defined.
Though I actually include it in the header:
<script type="text/javascript" src="http://rockfinder.de/misc/jquery.js?v=1.4.4"></script>
Do I have to do anything else to activate JQuery in Drupal? Is $ being overwritten by Drupal?
That's the website: http://rockfinder.orgapage.de
From the Drupal 7 upgrade guide:
Javascript should be made compatible
with other libraries than jQuery by
adding a small wrapper around your
existing code:
(function ($) {
// Original JavaScript code.
})(jQuery);
The $ global will no longer refer to
the jquery object. However, with this
construction, the local variable $
will refer to jquery, allowing your
code to access jQuery through $
anyway, while the code will not
conflict with other libraries that use
the $ global.
You can also just use the 'jQuery' variable instead of the $ variable in your code.
According to Firebug, your jQuery file is being loaded:
But the $ is being overwritten by something else:
What you should do is encapsulate the use of the $ variable with a function that invokes itself using the jQuery object as it's first actual argument:
(function ($) {
// in this function, you can use the $ which refers to the jQuery object
}(jQuery));
Chances are your script is not initialized this way, you'll have to use Drupal.behaviors.YOURTHEMENAME
(function ($) {
Drupal.behaviors.YOURTHEMENAME = {
attach: function(context, settings) {
/*Add your js code here*/
alert('Code');
}
};
})(jQuery);
"$ is not a function" is a very common error that you may face while working with jQuery. You can try any answers of given below:
(function($){
//your can write your code here with $ prefix
})(jQuery);
OR
jQuery(document).ready(function($){
//Write your code here
});
Basically this will allow our code to run and use the $ shortcut for JQuery.
You can create the separate file for js and than add js file using the following:
drupal_add_js('path', 'module_name');