I'm loading a jQuery script dynamically into random pages.
Sometimes they support jQuery, sometimes they have other libraries and sometimes they don't have any library at all..
I need to support all cases, therefore, first I check if jQuery has loaded.
Case not, I load jQuery dynamically into the page using .noconflict (to avoid conflicts in case there are other libraries there, daahhh) and then just continue with my script.
Case it's already been loaded, I need to know if the page has triggered the .noconflict function or not.
Why ? it's simple.
Let's say a random page have both Prototype and jQuery (happens, yes).
The webmaster trigger the .noconflict mode for the jQuery, to avoid conflicts with it.
After that, I trigger my script, and check if jq has been loaded (yes).
And then, I have to know weather to use $() or jQuery() methods, since if I'll continue using $() I might access the Prototype handler,
And I don't want that.
.noConflict only removes the $ object and not the jQuery object. (Except if you add true as first parameter.
So you can always use jQuery()
you can use:
jQuery(function( $ ){
//Insert your javascript code here
});
and all of your jQuery code will be in these braces and will never conflict with other prototypes.
As everyone else said, you should just always default to using the full jQuery object instead of the alias. If it's a quantity-of-typing issue, use $ and then find-replace in your text editor before pushing to live.
...But if you absolutely, positively MUST do this the ridiculous way, it's simple:
if ($ == jQuery) { alert("YAY"); }
Here's an example I cooked up on JSFiddle using jQuery 1.8 and a separately-loaded MooTools 1.4.5: http://jsfiddle.net/fL9rk/2/
Run it once, then unload the external MooTools and try again.
Don't say we didn't warn you.
Related
In chrome console, i am able to inject a js like below
$("#pageForm").window('open');
And then the DIV form will pop up, however, if i change it to below
document.querySelector("div#pageForm").window('open');
It will return error: Uncaught TypeError: document.querySelector(...).window is not a function
at :1:41
Am I doing wrong in locating an element ?
Thanks
The window method you're calling - whatever that is - is a method that is provided to jQuery by a plugin you're using. It doesn't seem as though jQuery has a window method out of the box. Because you're using a jQuery plugin you need to locate your element using jQuery instead of a query selector.
that $ (dollar sign) you use is jQuery. (It may not be exactly every-day jQuery, it might be something chrome made up for pages that have not jQuery)
there is a difference between the result of $('<some_selector>') & document.querySelector('<some_selector>'); the first one returns a javascript object, which is a wrapper around the DOM Node found in the HTML. this wrapper object has some methods on it (including height(), width(), show(), window(), etc...) which may be added by jQuery or it's plugins (as suggested by Dwight). But the second way (document.querySelector) returns a DOMNode. it is a regular DOM Node and no! it has not a window() method on it
Yes, I agree with answer above. It seems you correctly select the element. However, window property does not belong js out of the box. Its gotta be a jquery plugin so that you can use with jquery. Another function made available to jquery.
You could simply wrap the queryselctor with $
$(document.querySelector("div#pageForm")).window('open');
I have noticed an interesting issue on a website that I am helping a friend with. When I am on the homepage I can use javascript/jQuery to access the DOM as expected and everything works fine. If I use the console and type console.log($('html')); it returns the html object from the site as expected.
However, if I do this exact same thing on any page other than the index, it returns null. The source of the page appears to be the same and I can see all the elements there, but javascript itself does not seem to be aware of them.
The site is built using the Typo3 CMS, if that could be part of it.
Does anybody have any experience with this? Or is there any way to tell javascript to re-read the DOM after the full page load?
EDIT Somebody asked for a link to the site so here it is: http://www.stinglonline.de/
You have a conflict between jquery and prototype.
Add something along the lines of var $j = jQuery.noConflict(); and then update your jquery on that page to use the new $j variable such $j("html") and it should work for you. See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
I tested this, in console, on http://www.stinglonline.de/haupt-menue/stingl-gmbh/profil.html.
Alternatively you can just use jQuery instead of the $, whichever works best for you.
Well it looks like the $ is part of the jquery library on http://www.stinglonline.de/top-menue/home.html
But the $ is part of the Prototype library on every other page.
You do not have this issue on the homepage because you do not use prototype there.
You should declare your prototype library BEFORE you declare you jquery library.
It looks like only the home page is running jQuery.
If you use native Javascript to select from the DOM it works just fine.
Give it a try:
document.getElementsByTagName('html');
That does the same thing in Javascript that $('html'); does in jQuery.
There are a few Notes and things to consider When using this native Javascript method.
I find jQuery very useful, but without a proper understanding of native Javascript it becomes a crutch.
EDIT
scrappedcola's Answer is correct I missed the jQuery tag in the code when I looked.
In the homepage, type $ in console(Chrome) as blow. It use jquery.
So $('html') return document.getElementsByTagName('html').
>$
function (a,b){return new m.fn.init(a,b)} jquery.js?1399526417:2
in other pages, type $ in console(Chrome) as blow. It use prototype.
So $('html') return document.getElementById('html'),
$('skiplinks') return document.getElementById('skiplinks').
>$
function $(b){
if(arguments.length>1){
for(var a=0,d=[],c=arguments.length;a<c;a++){
d.push($(arguments[a]))
}
return d
}
if(Object.isString(b)){
b=document.getElementById(b)
}
return Element.extend(b)
}
prototype.1.7.0.yui.js:1
$('skiplinks')
<ul id="skiplinks">…</ul>
I need to use UI components based on Jquery and prototype on same webpage. But this leading to conflicts and none of two components(one Jquery slideshow & another prototype based ticker), work normal.
How do I prevent this conflict and make both working together on same php page.
Please use Jquery noConflict method so that jquery's control of $ variable can be relinquished . Please refer to the below link
http://api.jquery.com/jQuery.noConflict/
Check out the jQuery.noConflict(); method.
Search before you ask a question though, I just googled and found a ton of similar questions.
You can always alias jQuery in a self executing method if you need to:
(function($)
{
// $ refers to jQuery
})(jQuery);
). I'm playing with some Opera User JS. I included "1jquery.min.js" in my User JS folder (1 in front because Opera loads them alphabetically). Unfortunately, it doesn't appear to be working.
window.onload = OnWindowLoad;
$(document).ready(function()
{
alert ($('#area_19'));
});
function OnWindowLoad ()
{
alert ($('#area_19'));
alert(document.getElementById("area_19"));
}
What's interesting about this code is that the first two alerts come back in NULL, but the last one does find the object! So the element definitely exists in the page, but my jQuery seems unable to get it. What's even stranger is that the jQuery "ready" function works, indicating that I do have jQuery capability.
I'm quite puzzled about all this ::- /. Hopefully somebody can give me a clue ::- ).
I suspect you are running the script on a page that uses another JS framework, probably Prototype.js.
If Prototype were included by the target page it would overwrite your jQuery copy of $ with its own that gets an element by ID, not selector. Since there is no element with ID #area_19 (# not being a valid character in an ID), it would return null. jQuery would never return null for a non-existant element, you'd only get an empty wrapper object.
(The $(document).ready() code would still execute because the $ was called before Prototype was included and changed the behaviour of $.)
Try using the explicit jQuery function rather than the $ shortcut.
These sorts of interferences are common when mixing multiple frameworks, or even mixing two copies/versions of the same framework. From jQuery's side its interactions can be reduced, but not eliminated, with noConflict. Personally for code like user scripts that might have to live in a wide range of contexts not controlled by myself, I would avoid using wide-ranging frameworks like jQuery.
I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/
You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...
If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.