jQuery plugin getting overwritten by another implementation of jQuery - javascript

I'm working on a Chrome extension that injects some scripts into Gmail, like jQuery and qtip. It worked without any problem until I added the Chrome extension LinkedIn Sales Navigator, which (I checked) is using jQuery too.
After adding it, I get this error:
TypeError: $(...).qtip is not a function(…)
And console.log($.qtip) returns undefined, while before adding this extension it was returning the function.
My flow to inject these scripts is:
In the manifest's "content_scripts" section I'm adding content.js.
In content.js file I'm using document.createElement("script") for each script and append it to the page's <head>.
I don't know what the problem is but I think it's an overwrite issue with jQuery but I'm not sure why nor how to solve it.
Thanks ahead for any help !

So, thanks to the comments I found out jQuery.noConflict(); existed, and have been able to check the availability of the wanted function and act accordingly :
if(!$.qtip)
jQuery.noConflict();

Related

Google Chrome Developer Tools Issue with Jquery in the Console

When I try to execute below JQuery code in Google Chrome's developer tools
$("#u_16_0").val("AJ College, Sivakasi")
am getting below error:
Uncaught Error: <[EX[["Tried to get element with id of \"%s\" but it
is not present on the page.","#u_16_0"]]]>(…)h # LGuPoDEwQGD.js:36i #
LGuPoDEwQGD.js:36(anonymous function) # VM580:1
Could somebody please help me to resolve this issue? I've verified that the element is present in the page. I mean if I just type $("#u_16_0") in the console, the element is printed.
Please see the below link to screenshot containing version information of my Google Chrome.
[
UPDATE - 1
I managed to accomplish this with the below plain javascript code
document.getElementById("u_16_0").value="University of Cambridge"
UPDATE - 2
Amin's answer based on jQuery also worked. Hence, accepted it as answer and awarded bounty.
Note: Do not expect $ is always JQuery.
The Chrome console does not appear to have access to the content script's execution context.
Wrong, it does. You need to look at the correct place:
Instead of <page context> below in the animation, you have to select chrome-extension://<your extension id>
You can click "top" below in your version of chrome.
The previous screencast shows that the Console tab of the Chrome developer tools has two dropdown boxes at the bottom, which can be used to change the execution environment for the developer tools' console.
The left side can be used to change the frame context (top frame, so iframe, ...), and the right side can be used to change the script context (page, content script, ...).
Reference: Why will jQuery not load in Facebook?
The problem is when you assume that $ is always jQuery and it is not. Simple way to see if it is to console.log($) and see what it returns.
jQuery usually returns
function (selector,context){return new jQuery.fn.init(selector,context)}
or
function (a,b){return new n.fn.init(a,b)}
Now anyone can define $ to be anything. On Facebook it appears to be an alias for document.getElementById() and has some checks in it
function i(j){return h(j);}
running $("contentCol") will return a DOM element.
And if $ is not defined, in Chrome Dev tools, it is an alias for document.querySelector
$(selector, [startNode]) { [Command Line API] }
so in the end, do not expect $ to be jQuery.
This is because of jQuery $ sign conflict with other libraries like some facebook js libraries.
you should use jQuery instead of $:
jQuery("#u_16_0").val("AJ College, Sivakasi");
From looking at this answer it looks as though your call to:
$("#u_16_0")
is not actually calling jQuery.
Try changing the page context

Uncaught TypeError: jQuery(...).fancybox is not a function |fancybox used in wordpress

I have a wordpress website and I want to show my video using fancybox, so I tried wp plugin like "fancybox for wordpress" and "easy fancybox".
But both of them give me the error message "Uncaught TypeError: jQuery(...).fancybox is not a function".
I search for many questions on here and found this can be jquery conflict, but I cannot figure out where is it.
here is my site http://skyblueenglish.co.uk
Notice that I only have one of above plugins at one time.
as per my thinking and till i have checked, what happen is,
in word-press you have included fancybox jQuery and it will obviously installed when you have installed the plugin. Now what happen is ,while using some JS function or JS Class it is mandatory to include jQuery file before we use/include the third party JS.
I checked the "View Source" for your page.
<script src="http://skyblueenglish.co.uk/wp-content/themes/skybluetheme/js/jquery.min.js"></script>
and i found that above JavaScript file is included in the footer.
i just removed that line and put it before
<script type='text/javascript' src='http://skyblueenglish.co.uk/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
and the error is Gone.
so what you have to do is, you have to find your footer, find the included jquery.min.js . remove it from the footer and include it from header.
Let me know if you dont understand anywhere.
;( function( $ ) {
$(document).ready(function(){
$(".fancybox").fancybox({
//....
});
});
} )( jQuery );
I did so many experiments on same topic and also tried with many different way to solve according to wherever I found similar topics on internet but trust me nothing worked out for me and then finally I simply tried to see what exactly error says:
Uncaught TypeError: $(...).fancybox is not a function
and for which I simply removed a line which was saying if($.fn.fancybox!==null).
I am not strong enough to understand Javascript or Jquery thing being fresher so I just tried with simple logic and it worked for me lol.
This might not be the right solution but just thought to share my experience so maybe for someone it may work too.
It worked properly without loosing any function by removing below code
if($.fn.fancybox!==null)
{$("a[class^='fancyBox']").fancybox();
$("a[class^='fancybox-thumb']").fancybox(
{helpers:{title:{type:'outside'},thumbs:{width:50,height:50}}});}
Thank You!

tooltip jquery method not working on IE

I am running my App on Internet Explorer. There seems to be some issue with JQuery method:
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
for which, i get the following error on the javascript console:
Object doesn't support property or method tooltip
What can be the cause of this error? please help.
There's no standard tooltip() function in jQuery, it's provided by a plugin. Ensure that you're a. loading the plugin and b. loading it after jQuery by placing the <script> tag for the plugin after the one for jQuery.
It looks like you're using a tool tip plugin for jQuery, but it hasn't been loaded when you make the call.
If this code is being run when the page loads, you should put it into a $(document).ready() function, to ensure that all the supporting libraries are loaded before it runs. This should solve the problem.

Issue with javascript/jquery code in wordpress

Hey guys out of no where I got this issue that came up on a wordpress site, no idea why. So let me tell you the issues:
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.rating.pack.js:17 from jquery.rating.pack.js:17
Uncaught TypeError: Object [object Object] has no method 'live' from jquery.colorbox-min.js:4
So I have 2 plugins that stopped working because of this. I don't know if there was an update of some sort or where to even begin.
If you could give me a hand I would appreciate it.
Let me know if you need anything!
EDIT:
prodjsoundlighting.com - link to site with issue.
You have two jQuery scripts included on your website, you need to remove the one that is not from wordpress.
/wp-includes/js/jquery/jquery.js?ver=1.8.3
http://code.jquery.com/jquery-latest.min.js
What happens is all jQuery extensions (colorbox, rating pack) attach themselves on jquery object from first jquery script, then the second jquery script overwrites jquery object and you can't access any of the previously attached jquery extensions.
EDIT:
To avoid "$ is not a function" errors you will need to either replace all $ to jQuery
$(document).ready(function(){
will become
jQuery(document).ready(function(){
OR whats usually used, encapsulate your code with anonymous function like this:
(function($) {
// here goes your javascript code where you access jquery object will dollar sign
})(jQuery);
P.S. There is one quick fix you could use until you fix your code. Just use this in the same place where you had that other jquery call:
<script>var $ = jQuery;</script>
You should update to the latest version of Colorbox. Grab it here.
Old versions of Colorbox relied on .live(), which is a deprecated function (from 1.7+) and removed completely from jQuery 1.9+.

using jQuery in Safari Extension

I am trying to make a simple Safari 5 Extension that just injects a custom javascript. Any ideas how can I make use of jQuery in this custom script, please? I only know it's possible, because it is mentioned on one of WWDC videos, but I don't know how to do it.
Thanks
You can include jquery.js as a "start script". Your regular script (as an "end script") will see it.
I believe that if you don't need to keep jQuery updated, just copying the source code of jQuery into your extension's code base should work.

Categories

Resources