I'm trying to use PinchZoomer, a Jquery plugin on a Wordpress Website but I get this error twice in firebug: TypeError: $ is not a function
I know I should use "jQuery" instead of the $ sign in Wordpress but it doesn't make a difference in this case. Here's my code:
<script type="text/javascript">
jQuery( document ).ready(function($) {
$(".pinchzoom").pinchzoomer();
});
</script>
And here's my code to enqueue jQuery and the PinchZoomer plugin in Wordpress:
function add_jQuery_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('hammer', get_template_directory_uri() . '/pinchzoomer/jquery.hammer.min.js', array() );
wp_enqueue_script('mousewheel', get_template_directory_uri() . '/pinchzoomer/jquery.mousewheel.min.js', array() );
wp_enqueue_script('pinchzoomer', get_template_directory_uri() . '/pinchzoomer/jquery.pinchzoomer.min.js', array() );
wp_enqueue_script('modernizr', get_template_directory_uri() . '/pinchzoomer/modernizr.min.js', array() );
wp_enqueue_script('tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array() );
}
add_action('wp_enqueue_scripts', 'add_jQuery_scripts');
This is the page where pinchzoomer should work.
What am I missing?
The initial problem
According to the Wordpress docs for wp_enqueue_script, in the third parameter are the dependencies for that file.
This parameter is optional and accepts a type of array. So that jQuery can be used for that file all you would need to do is add it to as a dependency.
For example:
wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array('jquery'));
You can read more about this here where the docs explain about 'Linking a Theme Script Which Depends on jQuery'.
Possibly redundant code
I don't think you need to have this part in your code as I think that Wordpress comes with jQuery and you would be defining it as a dependency while 'enqueue-ing' the relevant scripts :
wp_enqueue_script('jquery');
No Conflict Mode
Finally, for the comment about putting jQuery in no conflict and having the dollar symbol present in the function.
By having the dollar symbol in the brackets next to function, this is basically just introducing the $ symbol to the local scope as a way of accessing jQuery without having to re-type jQuery every time while in 'no conflict' mode.
i.e. It's just a shorter way of accessing it. You can read about no conflict wrappers in Wordpress and about using $ for short here in the docs.
Therefore using the library in the following way should be fine.
jQuery(document).ready(function($) {
$(".pinchzoom").pinchzoomer();
});
Problems with PinchZoomer
From looking at the plugins source code and as we discussed in the comments, it could possibly be a problem with the PinchZoomer plugin itself on line 1440 as they have not themselves made $ available to their local scope.
You can test this by setting a breakpoint online 1440, refreshing the page and setting the value of $ to jQuery. If you have access to the source code your self you could make the fix, although really they should make the fix themselves.
The broken code on lines 1433 - 1442 should be fixed to look like the following code:
(function($)
{
function onReady()
{
PinchZoomer.init();
}
$(onReady);
}(jQuery));
When I go to the page you referenced if I evaluate $ in the console I get undefined, but jQuery is defined. I think your issue may be the callback variable, if jQuery is defined than you shouldn't have to worry about $ being defined unless there is a library conflict.
This should work:
jQuery( document ).ready(function() {
$(".pinchzoom").pinchzoomer();
});
Here is a short-hand version of what you are doing:
jQuery(function() {
$(".pinchzoom").pinchzoomer();
});
// Or
$(function() {
$(".pinchzoom").pinchzoomer();
});
As an Anonymous Function
Another alternative would be to wrap your jquery within an anonymous function:
(function($) {
// All of your jquery calls inside of here
$(function() {
$(".pinchzoom").pinchzoomer();
});
})(jQuery);
You can add this code before ready function.
$=jQuery;
Also please use $ or jQuery in second line you use $ please use jQuery and check.
Related
Spin360 doesn't work:
All scripts are connected into functions.php
add_action('wp_footer', 'add_scripts');
function add_scripts() {
if(is_admin()) return false;
wp_deregister_script('jquery');
wp_enqueue_script('remodal', 'http://code.jquery.com/jquery-3.0.0.min.js','', '',true);
wp_enqueue_script('remodal', get_template_directory_uri().'/js/jquery.threesixty.js','','',true);
wp_enqueue_script('remodal', get_template_directory_uri().'/js/spinspin.js','','',true);
}
Jquery.threesixty.js -> http://www.mathieusavard.info/threesixty/demo.html
Spinspin.js:
jQuery(function($){
$("#spin").threesixty({images:["...", "..."], method:'click', direction:'forward', sensibility: 1});
});
Article page:
<div id="spin"></div>
<script> if (window.jQuery) {
alert('Connected'); //Return Connected
}
</script>
Page -> http://okwood.by/2016/05/iv78-optima/
Since wordpress uses jQuery.noConflict() to prevent collisions with any other library that might use $ alias you either need to replace $ in your code with jQuery or insulate your code in an IIFE like:
;(function($){
// make sure document is ready
$(function(){
$("#spin").threesixty({images
});
})(jQuery);
OR
jQuery(function($){
$("#spin").threesixty({images
});
WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.
You can't use $ in jQuery script, try instead jQuery (replace $ with jQuery).
Wrap your code like this
jQuery(document).ready(function( $ ) {
//Code Here
});
Wordpress ships with jQuery in noConflict mode but when you load jQuery from CDN I don't think that the case. Another point is that the first param for wp_enqueue_script() function is string $handle, each handle should be unique. It is also highly recommended to define script dependencies to ensure loading of all the dependencies it needs. Try this example:
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://code.jquery.com/jquery-3.0.0.min.js', [], false, true );
wp_register_script( 'threesixty', get_template_directory_uri().'/js/jquery.threesixty.js',[ 'jquery' ], false, true );
wp_enqueue_script( 'remodal', get_template_directory_uri().'/js/spinspin.js', [ 'threesixty' ], false, true );
And very important, wp_enqueue_scripts is the proper hook to use when enqueuing items, not wp_footer.
I'm having an issue with calling a method that has got me completely stumped. I have a set of methods in an external js class that's used for libraries outside core js for the WP theme.
(Sorry About the unending line)
external.js
(function(a){
var b=0;a.fn.mobileMenu=function(c){function e(a){return a.is("ul, ol")}function f(){return a(window).width()<d.switchWidth}function g(c){if(c.attr("id")){return a("#mobileMenu_"+c.attr("id")).length>0}else{b++;c.attr("id","mm"+b);return a("#mobileMenu_mm"+b).length>0}}function h(a){if(a.val()!==null){document.location.href=a.val()}}function j(b){b.css("display","none");a("#mobileMenu_"+b.attr("id")).show()}function k(b){b.css("display","");a("#mobileMenu_"+b.attr("id")).hide()}function l(b){if(e(b)){var c='<div class="td_mobile_menu_wrap"><select id="mobileMenu_'+b.attr("id")+'" class="mobileMenu">';c+='<option value="">'+d.topOptionText+"</option>";b.find("li").each(function(){var b="";var e=a(this).parents("ul, ol").length;for(i=1;i<e;i++){b+=d.indentString}var f=a(this).find("a:first-child").attr("href");var g=b+a(this).clone().children("ul, ol").remove().end().text();c+='<option value="'+f+'">'+g+"</option>"});c+="</select></div>";b.parent().append(c);a("#mobileMenu_"+b.attr("id")).change(function(){h(a(this))});j(b)}else{alert("mobileMenu will only work with UL or OL elements!")}}function m(a){if(f()&&!g(a)){l(a)}else if(f()&&g(a)){j(a)}else if(!f()&&g(a)){k(a)}}var d={switchWidth:td_switch_width_normal,topOptionText:"Menu",indentString:"-"};return this.each(function(){if(c){a.extend(d,c)}var b=a(this);a(window).resize(function(){m(b)});m(b)})}})(jQuery);
And then the core
site.js
jQuery('#td-top-menu .sf-menu').mobileMenu();
and i end up with the error:
Uncaught TypeError: jQuery(...).mobileMenu is not a function
Somewhere along the line, i've managed to break this code and yet i'm not truly sure. I've stripped my header down to just the necessary scripts and nothing causes the error. My current JQuery CDN is the standard downloaded one from google cdn. I was under the impressional that i would get this issue because it cannot resolve the method. But if both scripts are there (I've logged external.js method to see that the script isn't broken), i don't see why it's throwing this error.
The site is http://whatzbuzzing.com to see the error first hand. As a wordpress distribution, i was under the impression that something has gone wrong outside the two files shown because they haven't been edited at all.
In accordance with the order of requests in Chrome Networks panel, you're loading external.js before jquery.min.js. Maybe you could try to fetch jquery.min.js before fetching of external.js? Sorry if I missed anything in your question.
this happens when multiple jquery files are loaded, not a very uncommon thing in a wordpress site.
in your case the problem is here
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
jquery comes bundled with wordpress, all you have to do is to properly enqueue your script with jquery as a dependency
function enqueue_my_external_script() {
wp_enqueue_script( 'externaljs', '//example.com/path/to/external.js', array( 'jquery') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_external_script' );
if you're calling this from a theme you can use get_template_directory_uri to get the theme directory's url like this
function enqueue_my_external_script() {
wp_enqueue_script( 'externaljs', get_template_directory_uri() . '/path/to/external.js', array( 'jquery') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_external_script' );
wp_enqueue_script function
wp_enqueue_scripts action hook
What might cause Firefox to tell me $ is not defined, but using 'jQuery' works as expected.
I'm on Wordpress 3.4 and Wordpress comes packaged with jQuery. Is it something specific to Wordpress?
jQuery.noConflict() has been called. To resolve this with a minimum amount of code change do this.
Before:
$("your").code(function () {
$("that").uses($.all("over").the("place"));
});
After:
(function ($) {
$("your").code(function () {
$("that").uses($.all("over").the("place"));
});
})(jQuery);
jQuery works in noConflict mode inside wordpress as the docs state: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
I am not too familiar with jQuery.noConflict. I have tried to implement it a couple times, but I feel I am doing it wrong.
Is there a way to set a noConflict with "jquery-1.7.1.min.js"? Do I put it in the actual file, or in the header of my index or both? I have tried to follow examples but I know I am doing it wrong.
Any guidance or quick examples would help me tremendously!
var foo = $.noconflict();
foo('body').addClass('bar');
You can either assign it a new alias (as shown above) or call $.noConflict and only have jQuery available for use. If you chose an alias though you must use that new alias every time you want to reference jQuery.
Keep in mind though that you can enable noConflict, but still have it available when necessary using an anonymous function:
// disable $ and force use of myJQ
var myJQ = jQuery.noConflict();
(function($){
//
// be able to use $ within this block and have it mean jQuery
//
$('body').addClass('foo');
})(myJQ);
// we're outside the block, now we're back to myJQ
myJQ('body').removeClass('foo');
No conflict mode is easy to use. Include this shortly after loading jQuery and any jQuery-dependent libraries:
var $j = jQuery.noConflict();
Then, instead of using $ for everything, use $j:
var elements = $j('.class-name');
Have you tried the following examples:
http://api.jquery.com/jQuery.noConflict/
I think it says all about it. Check your browser console to see any errors.
I'd recommend using a noConflict call, as well as wrapping your jQuery code with an anonymous function, so you can call jQuery by $:
jQuery.noConflict();
(function ($) {
// Now you can use $ to call jQuery
}(jQuery));
I've strange error i don't understand. I'm just moving my code from jQuery over to Mootools because it's much cleaner than the jQuery mess.
Now when i use the
$$('div.canvas')
in mootools i get the correct element.
When i try
$(document).getElement('div.canvas')
it tells me that $ is not defined. How can $$ and all helper functions like $lambda etc. be defined but not $?
Has something changed there from 1.1 to 1.2 and the docs are not updated yet?
as someone pointed out, when $ is defined, mootools 1.2.3+ will not take it over, it will revert to using document.id instead. this did not used to happen before that release so it largely depends on the version you are referencing. but it's certainly changed since 1.11 and it IS documented, read the announcement here http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
to your application design this means that, if your structure is...
load jquery (no need for noconflict, does not matter)
load mootools
... it can work as follows:
$("#foo"); // jquery
document.id("foo"); // mootools
// or create a temporary scope for mootools things
(function($) {
$("foo"); // mootools
})(document.id);
best / recent practices in mootools development require plugins and code released to reference document.id or be within such a closure to ensure compatibility. this is actually ok as unlike in jquery where $ aliases the jQuery singleton, in mootools $ is just a selector so its use will be far less spread. Hence typing document.id("selector") is not going to be that much of a drag.
Have you removed all reference to jQuery in your htmls?
MooTools will not override the $ function if it exists already. It checks for nullness of $ before defining it. So I suspect the $ is still lurking somewhere.
if (window.$ == null) Window.implement({
$: function(el, nc){
return document.id(el, nc, this.document);
}
});
After including jQuery and running $.noConflict(); but before including MooTools, can you log the contents of $ and see what is logged?
include jquery
$.noConflict();
console.log($); // should return undefined
include mootools
If you are using both libraries on the same page you must use JQuery's noConflict() function
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
If you are still having trouble, try checking through your included JQuery files to ensure that any plugins/code use jQuery('div.canvas') etc instead of $ as $ has been released by the noConflict() function and will not run JQuery code.