jquerycdnfile-inclusion

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


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.


Solution

  • 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