How to Handle Multiple Ajax Libraries

Hi all, 

So, I use quite a few plugins on my website. 

All of these plugins call a different version of the ajax library. What is the reason for this? Is it because they will only work with the specific version or is it simply that at the time the plugin was developed, that was the latest version available? 

Multiple ajax libraries choke the browser and slow the website down. 

Can this be remedied by simply using the latest version of the ajax library?

Thanks

Akanksha 

7 minutes ago, AkankshaK said:

All of these plugins call a different version of the ajax library.

I don’t understand your question. Which library are you referring to? A working link to the site may help us to understand better. 

39 minutes ago, paul2009 said:

I don’t understand your question. Which library are you referring to? A working link to the site may help us to understand better. 

HI Paul,

So, one of the plugins I have uses this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

A second plugin uses:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

A third plugin uses:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

So, do we need to have all 3 or could we do with just one of them?

Sorry I am really not a designer/nor a techie, just learning as I build my own website. 

Thanks

Akanksha
 

On 2/17/2022 at 11:27 AM, AkankshaK said:

One of the plugins I have uses https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

This is a jQuery library. You have provided links to version 1, version 2.2.0 and version 3.51.

In summary, you should only ever load one version of jQuery on your site and it should always be the latest version of the library. The versions above have known security vulnerabilities and are not safe to use.

Today, the latest version is 3.6.1 and the correct link is as follows:

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

You should be able to remove all the other versions and replace them with the version that I've provided above. It should appear once only and should be added to your code injection area before other "<script>" tags. Remember: it's a good idea to take a backup of the existing code before making changes, just in case you have difficulties later!

You should try to avoid using jQuery altogether if you can, by using code snippets and "plugins" that don't require it. jQuery is relatively easy to learn as it greatly simplifies JavaScript programming, but whilst it makes learning to code easier, it is often completely unnecessary and should be avoided on a live site. Many snippets only require jQuery because they have been written by people who are learning to code (as opposed to professional developers) and they have yet to learn how to code in pure JavaScript (that doesn't require jQuery).

I hope this helps.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you Paul. That really helps. 

Can I further ask - the best place to add the jquery within the code injection area - is it the header or the footer?

I did as you suggested - took a back up and replaced the various versions of the jquery with the latest one. All plugins/code snippets are working except for one which will only work with: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Would you know why that might be? 

Thank you once again. 

1 hour ago, AkankshaK said:

Can I further ask - the best place to add the jquery within the code injection area - is it the header or the footer?

It's best to load jQuery in the footer, unless the script that relies on it must be in the header.

1 hour ago, AkankshaK said:

All plugins/code snippets are working except for one which will only work with v1. Would you know why that might be? 

Some methods and properties from older versions have been removed in favour or newer (usually better) alternatives. For example, .size() was removed in favour of the .length property.

You'd need to share the specific code so that we can understand the issue.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you Paul 🙏 I will move the jQuery to the footer. 

This is the script which wont work with the latest jQuery. It creates a Show More/Show Less accordion. 

<script>
 var SHOW_MORE = 'Show More'
 var COLLAPSE = 'Show Less'
 $(window).load(function(){
   $('a[href^="#expand"]').each(function(){
     var n = parseInt($(this).attr('href').split('-')[1]);
     var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n)
     next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>');
     $(this).click(function(){
       var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
       if (target_gallery.is(':visible')){
         $(this).text(SHOW_MORE);
       }
       else {
         $(this).text(COLLAPSE);
       }
       target_gallery.slideToggle();
       return false;
     });
   });
 });
</script>

$(window).load(function(){

becomes

$(window).on("load", function() {

Thank you Paul, the change worked great. I really appreciate all your help. Thanks again :)