-2

Ok, because of the scope of work and confidentiality, I cannot include sample code, however, I'll do my best to explain my situation.

general format of each component: each are exactly the same format!

CSS tags - never any problems here
HTML - main html for the component
<script type="application/javascript" src="pathto/jquery-2.0.3.min.js"></script>
Other jQuery plugins required by the component
<script type="application/javascript" src="pathto/componentPlugin.js"></script>

The site I am currently working on is big on dashlet components, and each component is completed by different people and each component is completely independent of any other component. These components are options through settings, so they can be shown or not shown, and display in any order on the page.

The issue is that 2 of the components require jQuery, currently both are using jquery-2.0.3 There is NO ACCESS at all to the head, so adding jQuery there is NOT an option and must be included in each component. Each component also includes MANY jQuery plugins.

For ease of explanation, we'll call Component 1 "C1" and component 2 "C2" If only 1 of these are on the page at a time, there are no problems, so the problems are only when they are both displayed.

The exact errors depend on the order of the components, but the main premise is that there is always some plugin that comes up as undefined and sometimes, $ is undefined or $.fn is undefined.

I do not know what users will have on the page since its in there settings, but for testing, I know that if I have C1 first with jQuery included, then C2 and comment out the script tag for jQuery (essentially makeing only C1 load jQuery) things work just fine.

Problem lies with both components including jQuery, and something always breaks.

Any ideas?

Kronox
  • 1
  • You can use $.noConflict: http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page – progsource Jan 08 '15 at 22:11
  • 1
    create a dependency system that loads dependencies first and only once – charlietfl Jan 08 '15 at 22:12
  • I've tried $.noConflict - which sometimes $ is undefined which causes new problems. – Kronox Jan 08 '15 at 22:12
  • @Kronox that would mean that noConflict isn't being used properly – charlietfl Jan 08 '15 at 22:13
  • I don't have access to anything but 2 files for the components .. the main html file and the plugin file. No access to backend or main system files .. so a dependency system cannot be done (or I would) – Kronox Jan 08 '15 at 22:13
  • @charlietfl - i've tried a few different ways to use $.noConflict, always open to trying different ways though – Kronox Jan 08 '15 at 22:15
  • you don't use `$.noConflict` it's var $newJQ = jQuery.noConflict(true)` for multiple versions. @fuzzyma has better solution though – charlietfl Jan 08 '15 at 22:17

2 Answers2

1

var $ = Jquery

Try the solution above or change your jQuery version.

I advice that you use jQuery version 1.9

TAbdiukov
  • 1,185
  • 3
  • 12
  • 25
Gega Gagua
  • 92
  • 9
  • Tried that, which causes more plugins to fail. and the company has mandated that we use 2.0.3 – Kronox Jan 08 '15 at 22:19
0

You said that many people are working on the components. Everyone has to make sure that there code doenst interefer with other code. So they have to include a check before they load jquery dynamically. For example:

if(!jQuery){
    //create jQuery-script-tag here
}

No-Conflict-Mode is no solution here because jQuery is defined twice anyway. Only the $ is removed in this mode.

Also make sure that every one is encapsulating there code like this:

(function($, undefined){

    $(function(){

        // dom ready
        // do your stuff

    });

})(jQuery);
Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
  • can still use $ by wrapping it all in an IIFE – charlietfl Jan 08 '15 at 22:14
  • I use: (function($,undefined){})(jQuery); – Kronox Jan 08 '15 at 22:17
  • Also, I tried both http://css-tricks.com/snippets/jquery/load-jquery-only-if-not-present/ – Kronox Jan 08 '15 at 22:18
  • Just wrapped all code in IIFE .. still no change. Uncaught TypeError: undefined is not a function (which is the first components plugin call) – Kronox Jan 08 '15 at 22:24
  • IIFE wouldnt do any job. Its just good to encapsulate your code. You have to load only one jQuery. Thats the root of your problems. There are many libs which do the job with loading libs dynamically for you – Fuzzyma Jan 08 '15 at 22:39