Is it possible to have 2 different jQuery versions in the same document, and have them to not collide with each other?
For example if I create a bookmarklet and want to base the code on jQuery.
This bookmarklet is injected on some page that uses another version of jQuery then my code would overwrite the version used on the page.
Is it possible to avoid that?
Or are there some other libraries that provides this functionality
Or maybe I should rethink the whole thing.
Thanks for answers and pointers,
bob
jQuery comes with a way to avoid collisions. After you load the first version, you can assign it to a different variable.
var $j = jQuery.noConflict();
And then load your second jQuery version. The first one you load can be accessed with $j(...) while the second one can be accessed with $(...).
Alternatively, somebody made a little helper in an attempt to make it easier to switch between different versions.
Here is a way to detect is JQuery is already present: jQuery in widget
Work out the oldest version of JQuery your code will work with.. And refuse to work if the version present is too old. Only a few people will miss out, most sites using JQuery are pretty up to date..
Why not just have different versions of your javascript, for different versions of jquery, so, look at what version is on the page and get the appropriate code that will work on that version of jquery.
This would be safer, as anything else may be very fragile, as it sounds like you don't have control over the version of jquery that will be on the page.
Related
I read a post answer that you can do search for the code I need from an old version of jQuery and copy it and paste it into a newer version jQuery script. This way I don't have to try and have two versions of jQuery to load at the same time which was unsuccessful. Both the jQuery scripts I have are .min
How do I do this? See the person's answer below
Why would you need two jQuery libraries anyway?! Just use the newer one! ... Let's even say you needed the old one because you need some functions that aren't available in the new framework. Just look them up in search mode and copy past them one by one to the new framework (can only be done if you use jQuery offline like me, which saves loading time during developpement cause it gets cached.) P.S: I hope this doesn't cause any copyrights infrigments.
Editing jquery is very bad practice, do it only for very small projects which maintenance won't have any work with jquery or component updates at all!
Better try using Jquery Noconflict library.
I have a problem with integrating my header and footer in whmcs. Everything works perfectly. Although a strange problem came along. It has something to do with the jquery.js file in my custom layout.
when I comment out the jquery.js in my footer.tpl the dropdown menu in the header does not work on pages where whmcs generates tables. (invoices and domains)
But when I do use that jquery file the tables are still generated fine and the menus work, but then I can't order domains.
No button or text fields appear when ordering a domain.
I know this is not a good and a vague question but this has got me puzzled for quit a while now.
Anyone with who can push me in the right direction to find a solution? Or someone with a similar experience with whmcs integration?
thanks in advance!!
Not sure if you found a solution on this, but likely the culprit is one of two things:
1) The jquery library loading second is clobbering the first one so it no longer exists. To fix this you should call jQuery.noConflict(); prior to loading the second jquery library, this way the $ shortcut gets pushed over to use jQuery and frees up the $ for the new jquery. This however may become a problem if any of the javascript relies on the $ shortcut and must point to the first jQuery library, in which case all shortcuts should be renamed to jQuery.
2) The scripts executing the later jQuery library aren't compatible. This can be problematic if the versions are very different as some methods and capabilities have changed over time.
Best thing to do is always to use only one jQuery library, and use the newest one if possible. Older scripts that rely on the older jQuery should be updated if possible.
We're developing a snippet that is embedded in 3rd party sites, and uses jQuery.
The snippet checks if the site already has jQuery loaded. If so, it uses that library, otherwise it loads our own copy (currently jQuery 1.4.4, we're migrating to the latest soon).
There are breaking changes in jQuery. One such change, for example is the change in semantics of attr(), and introduction of prop().
Are there some guidelines to working with jQuery in a way that will be as backward compatible as possible? Even when we migrate to latest, we still want to use an existing jQuery library if it exists instead of loading a new copy, to save load time and resources.
There are a few solutions to your problem
1. Use a subset of jQuery
Find the subset of jQuery that works upto a reasonable amount back and only use that subset.
Note that I recommend not using .attr at all, ever. since a) it's a minefield and b) it has different behaviour on different versions. You may find the sensible subset of jQuery is quite small. Good luck finding it.
2. Just use the latest version
Use the latest version of jQuery and tell your library users that they need to upgrade.
Seriously everyone should be using the latest version anyway, force them to upgrade.
3. Don't use jQuery
Don't have a dependency on jQuery.
Seriously, the less dependencies you have the better your code is
I prefer 3. as an optimum solution
Take a look at these guidelines:
http://www.davidtong.me/upgrading-jquery-from-1-4-x-to-1-6-1/
it's not the latest version available of jQuery, but it's enough hot.
Version 1.6.4 is a minor release
From version 1.6.4 to 1.7.x some new features and fixes were introduced but nothing seems is breaking code written for jQuery 1.6 version
This is one of my pet peeves with jQuery even though I love what it(jQuery) enables overall.
I wish the jQuery team would have addressed this early in development and created a version initialization method so you could "request" a specific version when building your library. Ideally, you'd have:
(function($, undefined) {
// your code
}(jQuery.noConflict(false, "1.4.4")));
Where jQuery.noConflict would accept a "key" for which API version you would like to use for this library. Each jQuery loaded would check automatically if a previous jQuery was loaded and create a new reference entry for it in an associative array. (check for jQuery/$, request jQuery.jquery to get version, request jQuery.loadedVersions to obtain the previous associations, and build a master list of all loaded APIs) If no valid library was found, it could default to the latest available version or just kick out an error.
Of course, this doesn't help you (unless you want to modify a subset of jQuery APIs and keep them up to date yourself... /yuck) but short of that, it's a bit of a crap shoot.
noConflict will return the jQuery API if $ is not the current jQuery API (thus, not overwriting the $) but it doesn't really handle API conflicts and you'll only ever get the last jQuery API loaded. It would simply ignore the first loaded API (because it's not === to the current code scope jQuery object) and return itself.
I know PHP and MVC but when I work on Joomla I dont want to learn Mootools for AJAX , I rather include jQuery which I know thoroughly. I think IMHO jQuery has the largest mindshare in AJAX Libraries.
When I work on Magento , instead of using bundled prototpye , I use jQuery . Same is the case with SocialEngine where I dont use the bundled mootools , but jQuery what I know better.
Personally I think it is ok to include 2 Javascript Libraries on one HTML Page because it doesnt puts any Extra Procesing load on the Server . Even in the Client Browser I dont find any performance Issues . Moreover , since jQuery is loaded from Google CDN so there is every chance that Browser Cache already has it .
What do you think , Is it ok to include 2 Javascript Libraries on 1 HTML Page ?
It's technically ok as long as the libraries don't conflict with each other (i.e. both try to bind the $ as a function) and you don't notice terrible performance for your end users.
That being said, each javascript library that you include adds extra requests and processing on the client side. While you may not notice an impact on your development computer (usually a high powered beast), you end users on their $200 laptops may not be so fortunate.
As much as possible try to only include the portion of the library that you need and concatenate libraries into a single file to cut down on the HTTP requests.
I don't see a reason why you shouldn't be able to use more than one library at the same time. In some cases you will have to take care of possible conflicts, e.g. if both use the $ symbol/function.
See this page for more information: Using jQuery with Other Libraries
Yes this is done all the time. View source on this page and you will see at least 2 included libraries.
There is no particular problem if you don't use 2 libraries which alter the prototypes.
jQuery doesn't do that so you can use it with any other library.
The major librairies which alter the prototypes are MooTools < 2, dojo < 2 and Prototype < 2.
I have been optimizing my website but the one problem that stands in my way is all the jQuery functions that I do not use. The only ones that I use are for a smooth page scroller. It just seems like such a waste of download time.
My question is: Is there any script or program that will remove the jQuery code that I do not need and leave the 1 or 2 functions that I do need.
There's no way to do this, especially since it's not that simple. For example .fadeIn() is one method, but it calls the whole animation section of jQuery to fade the element, but that's after your selector has accessed the traversal section including the Sizzle selector engine...that's how most frameworks are, it'd be very tricky to remove pieces because of so many dependencies inside the framework itself.
That being said, if you're delivering jQuery correctly, it's minified and gzipped, and you're only sending about 24kb to the client which they cache so it's just sent once, not every page load. Also, they may have already cached it from another site, the more people who point their site to the same CDN (the page you're viewing does) the more likely this is to happen.
Google has a CDN, details here, for example from there you can grab jQuery, or jQuery UI:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js
Previous versions of these as well
Also, Microsoft has a CDN, details here, you can fran jQuery and the validation library from it:
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js
Full list of validation files here
Note: these are the current versions as of the time of this answer, don't use these explicit links if you're finding this later, there may be more recent versions available.
Just reference the library from Google, chances are it will already be cached on the client...
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
This will also save you bandwidth. StackOverflow and many other sites do this.