how to enqueue jQuery v3.6.1 to wordpress plugin - javascript

I developed a wordpress plugin and send it to Wordpress plugin directory and it rejected because of : "Including Libraries Already In Core" (jquery)
I enqueued the jQuery v3.6.1 (min) library into my plugin as follows in the version I sent before it was rejected :
wp_register_script( 'aicontentgenerator_jquery',$my_plugin_dir.'/js/jquery.min.js' , array(), false, true );
wp_enqueue_script( 'aicontentgenerator_jquery' );
Since it was rejected by wordpress, I changed it as follows:
wp_enqueue_script('jquery');
but after this change was made, my plugin started not working properly.
I did not make any changes to the javascript codes. I think this is because the default jquery version of wordpress is different from the version I have installed.
When I try to run the code, stucking on loading screen and got an error as seen in the picture below.
error :
Uncaught TypeError: $ is not a function
at aicontentgenerator.js?ver=6.1.1:18:7
how can i solve this problem?

I think the problem is the bundled jQuery version for WordPress is in No Conflict mode, so you can't use the $ directly
You have to use jQuery instead of $ or wrap all your code on something like this
jQuery(document).ready(function($){
// Here you can use $
});

Related

Wordpress JQuery not running for plugins

No matter what I seem to do, JQuery will not run properly on my wordpress site!
Note - This is my first wordpress website
I have tried what seems to be everything now but I can't get jQuery to properly run on my wordpress website.
I have tried removing the default wordpress jquery and running my own by using
wp_deregister_script('jquery');
wp_register_script('jquery', get_stylesheet_directory_uri() . '/inc/jquery-3.3.1.min.js', false, '3.3.1', false);
wp_enqueue_script('jquery');
But this returns the following errors
Uncaught TypeError: jQuery.ajax is not a function / jquery-3.3.1.min.js
Uncaught TypeError: jQuery.ajax is not a function / front-end-deps.js
I have tried to load jquery first before both my header and footer scripts
wp_enqueue_script('jquery');
include(locate_template('inc/layout/header-layout.php'));
wp_head();
This removes the jQuery.ajax is not a function error, but then any plugin I install cannot find jquery and returns errors like
jQuery is not defined
**I have manually called jquery into wp_enqueue_script() where possible, such as
wp_enqueue_script('my_script_name', array('jquery'));
Which tends to fix it, but this option is not available for all plugins.
I have completely removed all of my manual jQuery calls and tried allowing wordpress to do it by default
This doesn't throw any immediate errors, until a plugin tries to use Jquery, then I get
Uncaught TypeError JQuery.ajax is not a function
Surely the way that wordpress includes Jquery should make it accessible to the entire site?
Few things to note, as I said this is my first wordpress site so im not sure if these are normal or not
When I inspect the website and view the website sources, there is no jquery. I'm assuming that it is compiled and added into the 'scripts.js' file? As thats the only javascript file my site is running.
When I run wp_enqueue_script('jquery'), it doesn't actually do anything to the code. For example, if I run it in the header, and then check the source code, it doesn't add in jquery or anything. Am I wrong in thinking that wp_enqueue_script('jquery') should add JQuery in to the code?
Some of the plugins I am using that cannot find jQuery are NinjaForms and SB Instagram (NinjaForms doesnt display any errors until i try to submit a form, i then recieve jQuery.ajax is not a function)
I have searched all over the internet and tried most of what I have found, so as far as i'm aware this isn't a duplicate question!
Does anyone have any ideas on how I can trouble shoot this and fix it?
Edit
I can get it so that JQuery loads, is viewable in the source and doesn't error, but then as soon as a plugin tries to access it, it throws the error
Uncaught ReferenceError: jQuery is not defined
So a few things, you don't manually have to enqueue jquery as you can pass it as a parameter to your other queries. If you look at the example below the wp_enqueue_script function has 3 parameters. ('file name', 'directory', 'array of scripts to be loaded before this one').
wp_enqueue_script('semantic.min.js', '/wp-content/plugins/ct-plugin/js/semantic.min.js', array('jquery'));
The other thing is that in wordpress you cannot use the $ shorthand for jQuery you must type out jQuery(), in your script for it to load properly. Maybe if you can provide some context of the script you are trying to run it would help us diagnose better.
My last thought is that when the plugin is being loaded you aren't calling a function to load these enqueue your values. See the following code below on how to hook into the enqueue process on wordpress to load your own scripts in.
//Create the action to enqueue the admin scripts
add_action('admin_enqueue_scripts', 'admin_scripts');
Resource for how to use wp_enqueue_script found here
function my_amazing_scripts() {
wp_enqueue_script('my-great-script', plugin_dir_url( __FILE__ ).'/js/your-amazing-jquery.js', array('jquery'), '3.3.1', true);
}
add_action('wp_enqueue_scripts', 'my_amazing_scripts');
Try adding
define('CONCATENATE_SCRIPTS', false);
in your wp-config.php file.
However this may act more like a debugging tool in order to help you isolate the issue not 'solve' it.
I think your issue is caused by a plugin. Please disable ALL plugins and remove any method where you manually added jQuery in your code then try again.

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.js:4.
I created the project following the steps on the foundation site, but I can't seem to get rid of this error. Foundation and jQuery look like they are included and linked up correctly in the index.html file, and the linked app.js file is including $(document).foundation();
Does anyone know what is causing this error? and what a solution might be?
This error might be caused by the jQuery event-aliases like .load(), .unload() or .error() that all are deprecated since jQuery 1.8. Lookup for these aliases in your code and replace them with the .on() method instead. For example, replace the following deprecated excerpt:
$(window).load(function(){...});
with the following:
$(window).on('load', function(){ ...});
Please add below jQuery Migrate Plugin
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
This error is often caused by incompatible jQuery versions. I encountered the same error with a foundation 6 repository. My repository was using jQuery 3, but foundation requires an earlier version. I then changed it and it worked.
If you look at the version of jQuery required by the foundation 5 dependencies it states "jquery": "~2.1.0".
Can you confirm that you are loading the correct version of jQuery?
I hope this helps.
I faced this issue too. I was using jquery.poptrox.min.js for image popping and zooming and I received an error which said:
“Uncaught TypeError: a.indexOf is not a function” error.
This is because indexOf was not supported in 3.3.1/jquery.min.js so a simple fix to this is to change it to an old version 2.1.0/jquery.min.js.
This fixed it for me.
One of the possible reasons is when you load jQuery TWICE ,like:
<script src='..../jquery.js'></script>
....
....
....
....
....
<script src='......./jquery.js'></script>
So, check your source code and remove duplicate jQuery load.
I'm using jQuery 3.3.1 and I received the same error, in my case, the URL was an Object vs a string.
What happened was, that I took URL = window.location - which returned an object. Once I've changed it into window.location.href - it worked w/o the e.indexOf error.
It's seems to be funny but no one take consideration of the following.
Discover if you are having a library that requires an old version of jQuery. If you can't discover the version, You can do it commenting and uncommenting every script line until you find it.
Open the library and find the author.
Search in google for an update of the library. 90% you will find it.
Update the reference of your obsolete library that requires and old version of jQuery.
IN ANY CASE NEVER DOWNGRADE YOUR JQUERY VERSION
I solved this by installing the correct version of Jquery that my project required using npm

TypeError: 'undefined' is not an object (evaluating '$.fn') - Wordpress & shuffle.js

I've spent hours trying to work this out.
I'm trying to include shuffle.js in my Wordpress theme. It's dependant on jQuery 1.9+ & Modernizr.
I've added my scripts via wp_enqueue_script (see below)
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'modernizer', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'shuffle', get_stylesheet_directory_uri() . '/js/jquery.shuffle.js', array( 'modernizer' ), '1', true );
wp_enqueue_script( 'my-shuffle', get_stylesheet_directory_uri() . '/js/my-shuffle.js', array( 'shuffle' ), '1', true );
I've made them dependant on each other and I'm loading them in at the footer.
I've wrapped the 3 .js files in some jQuery noConflict Wrappers (see below)
(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
})(jQuery);
I'm still getting the errors:
Uncaught TypeError: Cannot read property 'fn' of undefined
jquery.shuffle.js?ver=1:1212
Uncaught TypeError: Object [object Object] has no method 'shuffle'
my-shuffle.js?ver=1.6
Everything I read points to something not loading in order, to jQuery not loading but I don't think thats the case. Of course I could be wrong :)
Does anyone have any ideas I can try?
[UPDATE]
I went and got the minified version of jQuery 1.11.1 and replaced it with the one bundled with Wordpress and it all fired into action!
Only half a day lost :(
[UPDATE 2]
See Kevin's answer below. No need to change the bundled jQuery, there is an updated version of shuffle.js
Shuffle.js is incorrectly using window.$ instead of window.jQuery. Fix it by replacing this line:
factory(window.$, window.Modernizr);
with this one:
factory(window.jQuery, window.Modernizr);
it's near the top.
The author has already fixed this issue, you can download the fixed version from here: https://github.com/Vestride/Shuffle/blob/e6cb28bd1eb4a5ff60b5d2925b1e26d857f3ec2a/dist/jquery.shuffle.js
We can't help you, beyond telling you that jQuery isn't actually being defined, and that you have to debug this in your browser.
Inspect your page's source, find your <script src="jquery..."> and figure out if that file is
actually being included (no 404's on the error console) and
being included above the first attempt to use jQuery and
being included above any jQuery plugin's <script> tags

Javascripts conflict in Joomla

my website name is marutiindia.in. I am using two extensions -- module and plugin. Module uses mootools(I think it is mootools---script_12.js) and the other employs jQuery. The module is on homepage. When I try to enable these both extensions I get this error in script_12.js
Uncaught TypeError: Object #<Object> has no method 'getElement'
but the the plugin works fine and when I disable this plugin there is no error. So I guess this is some conflict between mootools and jQuery. So I made use of this script for the plugin jQuery file:
if(jQuery){
jQuery.noConflict();
}
But this doesn't resolve the error.
Am I doing it right or is there something else I am missing.
Thanks.
only doing this
if(jQuery){
jQuery.noConflict();
}
does not resolve your problem, if in the jquery module you have $ sign then the same conflict problem you will face.
To rid from this conflict try with this:
jQuery.noConflict()
jQuery(function(){
//replace all the '$' with 'jQuery'
jQuery('#some_id').show();
//instead of
//$('#some_id').show();
});
Looks like you already have JQuery running. (K2 uses it, which may be the issue.) It is likely an script ordering issue like this. Also, do JQuery no conflict more like this

Symfony 1.4: Call to undefined function visual_effect()

I am moving a project from SF 1.3.6 to Symfony 1.4.
I am using statements like the one below, very frequently in my code:
link_to_function('[Cancel]', visual_effect('blind_up', array('duration'=>0.5)));
I am now getting the error shown in the title of this question. I read in a (SF) forum that the Jquery plugin can be used to achieve this.
Can anyone show how to replicate this functionality/behavior by using the new plugin?
The visual_effect function was part of the JavascriptHelper up until version 1.4 where it was deprecated.
To get it working in 1.4 just install the sfJqueryReloadedPlugin. There is solid documentation on what is supports.
To install the plugin go to you symfony console:
./symfony plugin:install sfJqueryReloadedPlugin
Make sure the the plugin in enabled in you project configuration then include the jQueryHelper where required:
<?php use_helper('jQuery'); ?>

Categories