Question

I’m working on a page with so many libraries includes, obviously many different developer made their own touches to it, here are the includes

js/jquery-1.4.2.js
js/script.js
js/jquery.nivo.slider.pack.js
js/cufon-yui.js
js/cufon-replace.js
Myriad_Pro_400.font.js
js/Myriad_Pro_Cond_700.font.js
js/Myriad_Pro_700.font.js
js/jquery.prettyPhoto.js
js/imagepreloader.js
js/SpryAccordion.js
jQuerytimefield/src/jquery.ptTimeSelect.js

fancybox/jquery.mousewheel-3.0.4.pack.js
fancybox/jquery.fancybox-1.3.4.pack.js
js/jquery-ui-1.8.9.custom.min.js

I need to add selectable functionality to rows on the table, when I just add those 2 lines:

<script src="js/selectable/jquery-1.8.3.js"></script>
<script src="js/selectable/jquery-ui.js"></script>

the page doesnt show anything onload, when I check the javascript console here is what I get

I had no clue what to do, I just thought to use jquery.noConflict() but it didnt work.

Any ideas ?

Answer 1

If you added those two new libraries below the old ones, then that would explain the second error: all jQuery plugins must be loaded after loading jQuery; but you are overriding jQuery 1.4.2 (and all the added plugins) by adding jQuery 1.8.2 after they has been created/executed.

You can replace the first jQuery (js/jquery-1.4.2.js) by your new one (at the beginning, before any jQuery plugin), but you have to do some testing since the legacy js on your page may break (which I think is the cause of your first error in the console).

You are also overriding jQuery UI, and in this case you can’t just replace it: the old jQueryUI (js/jquery-ui-1.8.9.custom.min.js) is a customized one, so if you are going to “update it” you must add at least the same components (i.e. download a customized script with them).