i want to check if jquery plugins are already initialized / included (prevent dublicate resource loading) and if not i want to add the plugin by CDN or by a local source.
Anyone can help me with that Problem?
Update:
I'm currently building a custom template in drupal. In that template i'm using a slick slider for scrolling through pictures in a content gallery. I also want to use a custom module for a slideshow, which uses the slick slider too (js, css integrated in the module). So now i want to check if the slick slider of the slideshow module is already initialized, if not i want to load the slick slider js via cdn.
Hope that helps for understanding my problem.
Update 2:
Resolved the problem by using php and drupal core functions. I also found a solution with the modernizr.js load function -> asynchronous loading.
You can check and detect the plugin using this
if(jQuery().pluginName) {
//run plugin
}
You can try this:
if (!jQuery.fn.plugin) {
jQuery.getScript('http://url/to/the/script');
}
You can check for typeof jQuery. if undefined, load from CDN:
if (typeof jQuery == 'undefined') {
{
//load from CDN
}
or
if(!window.jQuery)
{
//load from CDN
}
Related
I am using WordPress. Fancy box and a lazy loader plugin. However, since adding the lazy load plugin the fancy box has stopped working.
When you initiate the fancybox plugin, you do so with some javascript like so:
var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('rel', 'fancybox');
select.fancybox();
This fires with the rest of the javascript when the document has loaded.
However, now I am getting this error:
select.fancybox is not a function
I am assuming that the lazy loading plugin is taking the images out of the equation so this function isnt able to do anything.
I have tried attaching it again afterwards but I feel like I am going in the wrong direction:
$('html').on('mousemove', 'a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]', function(){
$(this).attr('rel', 'fancybox');
$(this).fancybox();
});
Any ideas?
WordPress now includes browser-level lazy-loading attribute for all images, using the 'loading' image attribute (loading="lazy"). Perhaps you no longer need the lazy loading plugin?
See here:
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/
I've got an odd situation and can't figure it out why my JavaScripts are not working.
this is the general problem - if I load jquery 2.2.0 from this link:
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"
it all works fine
however Joomla is loading it's own version 1.2 which I've overridden with my template to current 3.3.1 version
at this point things are working but I've got 2 jQuerys loaded (one from joomla and other from google lib)
if I remove google 2.2 version, JS is not working (loading with standard script inside html)
if I replace jquery in my template with 2.2.0 version from google it is not working still (loading trough joomla head)
I get this error: TypeError: $.tablesorter is undefined
it makes no sense to me
Not sure if this will help but I had similar issue on my WordPress website and solved using jQuery Migrate: https://github.com/jquery/jquery-migrate
Usage
In your web page, load this plugin after the script tag for jQuery, for example:
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
shame, there are a few more ways you could get it working.
So were on same page have you fully removed the Joomla 1.2 jQuery? You mentioned you replaced it with the 3.3.1
also is it a specific page that requires the jQuery 2.2? or are you wanting to move to jQuery 2.2 for the whole site?
if you just need it on one page you could do some php in the header to switch the jQuery used depending on the page URL that way it would only load the required one and not 2 jQuerys on each page. Not the most ideal way but should work.
<?php
//First detect the URL
$url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
//Now do the if else to switch jQuery on desired page.
if (strpos($url, 'myPage.php') !== false) {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>';
} else {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';
}
?>
if you need or want it on the latest jQuery i would remove all jQuery and jQuery Migrate then put the latest versions of both in and then try and solve the errors remaining
can you share more errors?
e.g errors with just jQuery 1, then errors with just 2 and so on?
I have managed to resolve the issue by replacing all
$(function () {...
With
jQuery(function ($) { ..
I'm loading latest jQuery from my own server
I have exact same setup on another site and have no such problems
How do I make the Slick library not interfere with other JavaScript files? I know with jQuery there is no conflict; is there something similar with Slick?
Please see the script source: https://kenwheeler.github.io/slick/slick/slick.js
and the link where I'm trying to host it: http://www.zadroinc.com/this-is-a-test
I have a function on page load which initialize the slider on the page. The Problem is that on my development site every thing works fine as it should but on live site it breaks and give me following error in console.
Uncaught TypeError: $(...).carouFredSel is not a function
I also tried to call this function on document ready but changing the slider through thumbnails doesn't work and if clicking on enlarge link it give me another error
Uncaught TypeError: $(...).find(...).ensureLoad is not a function
here .ensureLoad is extended function which ensure the object loaded before it proceed further which is called like this
$.extend({
ensureLoad: function(handler) {
return this.each(function() {
if(this.complete) {
handler.call(this);
} else {
$(this).load(handler);
}
});
}
});
Following is the link to development site where it works fine [Link]
and here is the link to live site [link]
Thanks in advance.
The problem is you are having 2 versions of jQuery included in your page, http://www.mobler.dk/Files/Templates/Designs/Mobler/scripts/jquery-1.12.0.js and http://www.mobler.dk/Files/Templates/Designs/Mobler/scripts/libs/jquery-1.10.2.min.js.
Since 1.12 is included first and then the plugins, the plugins are loaded to that version of jQuery, then the 1.10 is loaded and the validation plugin. Now jQuery variable refers to the 1.10 version of jQuery which does not have any of the plugins which was loaded to 1.12.
So the solution is to remove the 1.10 jQuery from the page, or use noConflict() properly after including 1.10 so that by default the application will use 1.12.
Note: It looks like the second jQuery file is loaded to the element #popupform via the page http://www.mobler.dk/m%C3%B8bl%C3%A9r/kontaktpopup
i have jquery plugin jquery-1.4.2.min.js. while loading this file the following error is showing. but if i use it in another screen or another program it is loading successfully... i am unable to find the reason. Can any one help me please.
Thank you
Mihir
Make sure you are not referencing (linking) jQuery more than once in the page and that the plug-in is referenced after the jQuery reference. What sometimes happens (especially with auto script management) is jQuery is loaded, the plug-in is loaded in the jQuery instance, then jQuery is loaded again, which effectively resets any plug ins.