Why including cdn s twice in a page breaks the functionality of the associated cdn

Question

I have many times faced this problem that including a particular file or CDN twice in a page breaks the functionality of the CDN. The solution is to add it only once per page. Now I want to know the cause for it.

For example, suppose I have bootstrap CDN attached in the index.php page and I have also included the bootstrap CDN in header.php. Now I have included the header.php in the index.php page. I can see as a result the some portion of index.php loses its functionality. Can anyone tell me the core cause behind it? Does it somehow breaks the inclusion thread?

I tried to understand it by including same function twice in a page. But both the page and the function seem to work fine.

I am a little confused and curious about the matter.

Answer 1

I figured out that it is the js and jquery which is causing the problem. If I include jquery and js CDN twice it creates callConflict . That is the reason the JavaScript function does not work properly.

There are at least three ways we can solve this problem:

1. Only including the CDN once (most obvious solution).

2. Check whether we have already loaded the jquery or not. Using the below code line--

    window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\\/script>')

3. As all the libraries are using the $ keyword markup to instantiate each call, we need to create a new mark-up. Then for all the jquery calls we need to use our new markup. Using

   var $jq = jQuery.noConflict();

   It will create a new mark-up $jq