Javascripts conflict in Joomla - javascript

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

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

how to handle requirejs conflicts

I have a javascript plugin which can be added in any website. I am using requirejs in my plugin. When it is added to a website, which already has requirejs, I am getting script errors and the plugin is not working. I cannot find any noconflict method for requirejs. Suggest a solution.
Uncaught Error: Mismatched anonymous define() module: function () { return io; }
http://requirejs.org/docs/errors.html#mismatch
Similar case: link
I suggest, use old style Javascript methods to determine if requireJS is already part of the environment; if so, make no mention of adding requireJS; if not, then add it to the environment in the usual fashion (perhaps using document.write to emit a html script tag to invoke requirejs

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"

Why can't I use jQuery in amazon (in console)?

using firebug console in firefox for example when execute this script
$("body").css("border","4px solid red");
it will return an error with message:
TypeError: $("body") is null
same in chrome the error:
TypeError: undefined is not a function
any one knows why? and how to use it?
$ is not a reference to jQuery at that site.
It does appear as though an old version jQuery is loaded...
You can tell by doing this...
jQuery.fn.jquery; // 1.2.6
Also, keep in mind that consoles are often not a pure environment. If there's no other code using the $ variable, they may take it over.
It appears as though Firebug does exactly that. I'm guessing it's a shortcut for document.getElementById, which will return null if there's no element with the ID "body".
The error is different in Chrome because $ is apparently undefined, so you're trying to use undefined as a function.
In the case of Amazon, only jQuery is defined, not $, you can use the jQuery() function instead of $() or simply define $=jQuery
Note the version of jQuery is an old one: 1.2.6
Edit
$=jQuery.noConflict() sounds even cleaner
As "am not i am" stated, Amazon either doesn't use jQuery or doesn't alias it as "$".
If you want to use jQuery on a site like that, you can use a jQuerify-ing bookmarklet like this one:
http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet
to add jQuery (with the standard "$" alias) to the page temporarily.

Categories