Wordpress JQuery not running for plugins - javascript

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.

Related

how to enqueue jQuery v3.6.1 to wordpress plugin

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

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

Javascript plug-in doesnt appear on drupal

i want to put a soundcloud music player (http://stratus.sc/) on my drupalgardens page. i added an external source javascript library and uploaded a js file on the system as it says on the pluging website. all this tru the administration website of drupalgardens. When i check the sourcecode of my webpage it appears like the pluging is on the header. But it doesnt work, i cant see it. i activated all the jquery functions.
bit of sourcecode on header where the pluging seems there:
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript" src="http://NAMEOFMYSITE/sites/NAMEOFMYSITE/files/js/js_PRNQJr2GPf-FrbaSuV5IDQ1l6Lfby6e79KpPOUTf5kI.js"></script>
link:
http://bit.ly/10nyAHV
Any suggestions?
Note : The player im talking about is NOT the one that can be seen under the rotating banner. the one im talking about its supposed to be globally on the webpage at its seem on the pluging oficcial webpage
For one you're getting this console error: "Uncaught SyntaxError: Unexpected token < "
Not sure how that script is getting added but just removing the script tags may clear it up.
Even if the frame errors mentioned by KG are unrelated, you have to go clean that all up.
Your script should also be loaded after jquery. Since it looks like you have js aggregation turned on, I don't really know how to determine if drupal is loading things correctly. You can just tell your script to load in the footer instead of header if you're unsure. The links below explain how to do that.
Here are some javascript related resources for Drupal. They sometimes expect things to be handled differently.
The plugin is dependent on jQuery. By default, Drupal 7 loads jQuery 1.4. You may need to use the jQuery Update plugin to use 1.5, 1.7 or 1.8
Drupal Community docs about javascript:
http://drupal.org/node/756722
Drupal javascript API:
http://drupal.org/node/751744
I had a similar issue. Some reasons for a not working player are:
For some reason $ is not known (although jQuery is included). I replaced '$' by 'jQuery' and everything worked fine. That means use jquery(document).ready(... instead of $(document).ready(... and jQuery.stratus({.. instead of $.stratus({...
There is a typo on the stratos.sc web site. It should read $.stratus not $stratus (or jQuery.stratus, see previous hint).
Check that the source stratus.js and the initialisation code is included.
Mixture of https and http might be a good guess as reason for problems, but actually it works (I just tried it). If you can't find the problem, try to use a JavaScript debugger and check the error logs first!

Cannot get jQuery to work on site

Okay, I have been working for quite some time on a website for a friend..
My coding skills are .. questionable, and I've been having quite a few problems.
Currently the jQuery on my site simply stopped working, I could not find the reason, and I have done everything I could to try to get it to work.
( I have followed countless guides all over the internet, for troubleshooting etc. and I still cannot get it to work)
-EDIT-
I have moved all the files to the top of the code.. Yet the problem persists.
Sincerely yours, Malmoc
You are trying to use jQuery code before jQuery.js is loaded.
jQuery.js must load before any dependent code or plugins. Use a browser console and look at errors thrown on page load. "$" is not defined error is a quick indication of loading problem with jQuery
Think of it this way. jQuery library contains a number of functions, including defining "$". If these functions or "$" aren't already available when you call them, they are undefined and errors get thrown and your code won't work
Once you have jQuery script tag before other code, you may still run into complications if you recently added prototype library which also uses "$" alias. This can cause conflicts but there is a workaround using jQuery.noConflict()
Very odd, I suggest you set the source to jQuery to the website here:
http://code.jquery.com/jquery-1.8.2.min.js
Seems to be quicker response time, and in your source code you appear to link jQuery twice, that may be causing some issues.
Your $ is also getting overwritten by another script. Best that you use jQuery.noConflict() for this
http://api.jquery.com/jQuery.noConflict/
And then you can put your code in a closure like this:
(function(){
var $ = jQuery;
// jQuery code using $
})(this);
Looks like you're mixing mootools and jquery. Please resolve your conflict between jquery's $ namespace and mootools' $ namespace.
google "jquery no conflict"

'$ is not defined' in code following jQuery include

I'm getting the familiar '$ is not defined' error in my JavaScript for the following line in one of my javascript files...
$(document).ready(function() { … }
Normally this is because I've forgotten to include jQuery, but not this time! I have included it, and it is the first include in the page. This error happens in included JavaScript files, and also in any code within tags, all of which come after the jQuery include. It also doesn't happen all the time, maybe half the time when I refresh the page.
I've also used jQuery quite a lot and never seen this before, so I am quite confused.
Edit:
Looking at the Net tab in Firebug, jQuery is being requested and I get a 200 response but nothing is sent back in the response body. If I open the file directly in a new tab or whatever, I get an empty document. Firefox seems to think the file is cached but the data size is 0. Cache control is 'no-cache'. Confused.
Edit 2:
Opened jQuery file in VisualStudio, saved jQuery file with no modifications, everything works perfectly now. Still totally confused.
Are you sure that jQuery is actually being loaded into the browser? It sounds like it really isn't. You should use Firebug or Fiddler to check all the http requests to see if it is actually being downloaded.
Here's a screenshot of how you can check this using Firebug.
Are you using Wordpress or some sort of CMS? If so, their version of jQuery may have of code at the end which calls jQuery.noConflict(). You can read about this method here: http://api.jquery.com/jQuery.noConflict/
This means that whenever you want to use the $ function, you need to use jQuery instead.
For example...
Instead of
$("p").addClass("awesome");
You would do
jQuery("p").addClass("awesome").

Categories