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.
Related
I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!
I was wondering: scripting with javascript jquery is used by millions of people. Jquery is a well known coding language. Why the core file is still not default present in all the browsers?
So you dont have to put this line
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in the head of your webpage anymore.
Can someone give me a good reason for that?
JQUERY is currently 82.34 KB (minified), everyone may not use JQUERY in their projects so having the unnecessary file load onto your server is a waste. Another reason is security since they are always finding vulnerabilities in JQUERY and needing to patch or update. It should be the users overall decision whether they add it in or not.
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.
some time ago, I was reading an article(a library built by some guy) about how his library can do
lazy loading of JS
resolve dependencies between JS
(typically encountered when trying
to "include" one js from another)
include files only once. thought
specified multiple times regardless
of how they are called (either
directly specifying it as file or
specifying it as one of the
dependencies)
I forgot to bookmark it, what a mistake. Can some one point me to something which can do the above. I know DOJO and YUI library have something like this, but I am looking for something which I can use with jQuery
I am probably looking for one more feature as well.
My site has asp.net user controls
(reusable server side code snippets)
which have some JS. Some of them get
fired right away, when the page is
loading which gives a bad user
experience. Yahoo performance
guidelines specify that JS should
be at the bottom of the page, but
this is not possible in my case as
this would require me to separate the
JS and the corresponding server side
control into different files and
maintenance would be difficult. I
definitely can put a jQuery
document.ready() in my user control
JS to make sure that it fires only
after the DOM has loaded, but I am
looking for a simpler solution.
Is there anyway that I could say "begin executing any JS only after DOM has loaded" in a global way than just writing "document.ready" within every user control ?
Microsoft Research proposed a new tool called DOLOTO. It can take care of rewriting & function splitting and enable the on-demand js loading possible.
From the site..
Doloto is a system that analyzes
application workloads and
automatically performs code splitting
of existing large Web 2.0
applications. After being processed by
Doloto, an application will initially
transfer only the portion of code
necessary for application
initialization. The rest of the
application's code is replaced by
short stubs -- their actual function
code is transferred lazily in the
background or, at the latest,
on-demand on first execution.
OK I guess I found the link
[>10 years ago; now they are all broken]
http://ajaxian.com/archives/usingjs-manage-javascript-dependencies
http://www.jondavis.net/techblog/post/2008/04/Javascript-Introducing-Using-%28js%29.aspx
I also found one more, for folks who are interested in lazy loading/dynamic js dependency resolution
http://jsload.net/
About the lazy-loading scripts thingy, most libraries just adds a <script> element inside the HTML pointing to the JS file to be "included" (assynchronously), while others like DOJO, fetches it's dependencies using a XMLHttpRequest and then eval's its contents, making it work synchronously.
I've used the YUI-Loader that is pretty much simple to use and you don't need the whole library to get it working. There are other libraries that gives you just this specific funcionality, but I think YUI's is the safe choice.
About your last question, I don't think there's something like that. You would have to do it yourself, but it would be similar to using document.ready.
i did in my framework a similar thing:
i created a include_js(file); that include the js file only if it isn't included reading and executing it with a synchronous ajax call.
Simply put that code in top of the page that needs dependencies and you're done!
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.