loading jquery twice causes an error?

Question

I have a page where jquery + other js's is being loaded:

<script src="/eiv/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/eiv/javascripts/jquery.jeditable.js" type="text/javascript"></script>
<script src="/eiv/javascripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="/eiv/javascripts/corner.js" type="text/javascript"></script>
<script src="/eiv/javascripts/jquery.form.js" type="text/javascript"></script>
<script src="/eiv/javascripts/validationdate.js" type="text/javascript"></script>

I am loading tabs as follows:

<%if (tabnum == 1) {%>
        <script type="text/javascript">

            $(document).ready(function(){
                $("#tabs").tabs();
                $("#tabs ul li a").corner('7px top');

               var $tabs = $('#tabs').tabs();
                $tabs.tabs('select', 0);
                dateValidation();
                changeOption();
                deleteConfirmation();
        });
        </script>
<%} else if (tabnum==2) {%>
        <script type="text/javascript">

            $(document).ready(function(){
                $("#tabs").tabs();
                $("#tabs ul li a").corner('7px top');

               var $tabs = $('#tabs').tabs();
                $tabs.tabs('select', 1);

                   changeOption();
                   deleteConfirmation();
        });
        </script>
<%}%>

the validationdate.js is a mine built js that checks dates and other stuff. it has this as the first line:

document.write('<script type="text/javascript" src=""jquery-1.3.2.min.js""></script>');

Problem: Is that in production at time ..this page errors out and give a JS error. This causes the tab's to be not clickable. This error happens intermittently and I can not seem to reproduce it on my machine. Both machines are using IE. Error also happens in Firefox, though little JS error thing does not show up in firefox. and I even have firebug which does not show any JS error either.

I suspect that error is coming up because validationdate.js is also loading jquery-1.3.2.min.js. Can this be an error?

By the way, the JS error I get is 'Exception caught but not thrown ..line 23' and line 23 is following

<script src="/eiv/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>

I am really out of options here and am willing to try stuff out. and also ways to reproduce on my machine so i can fix it!!

Imaginative

Make sure that you are using one instance of jquery and it goes on top of all other js included files. – Crass

yeah there is only one instance of jquery in my page. however, like i said, validationdate.js also has a jquery instance. so does that make TWO instances of jquery – Imaginative

The script element you're writing with document.write won't run successfully due to the doubled up quotes in the src attribute. – Graziano

@Graziano any reason it would run fine on my box with same browser? – Imaginative

nevermind...then what I am thinking is probably not the problem – Imaginative

It should still show up in Firebug console as an error though. Did you post the document.write line exactly as it appears in your script? – Graziano

Answer 1

First to to answer your question, yes, including jQuery twice can cause all sorts of issues.

To fix it, this line:

document.write('<script type="text/javascript" src=""jquery-1.3.2.min.js""></script>');

Should be wrapped to check if jQuery already exists instead of blindly including it again, like this:

if (typeof jQuery == 'undefined') {  
  document.write('<script type="text/javascript" src=""jquery-1.3.2.min.js""></script>');
}

Then, it will only include it if jQuery isn't already on the page. There is one caveat, if you're using a different (probably newer) version of jQuery than the validation code was built for, there's a chance there are some breaks.

Osculation

The part about double loading jQuery causing errors - is this from experience, or just good advice? – Bulbul

@Bulbul - both...when you reload jQuery it will re-define window.$ and window.jQuery, clearing all previously loaded plugins for example. That's probably the single most common symptom of a double-include I see on Stack Overflow: "Why isn't my plugin defined? I included the script!" – Osculation

Alright, I'm trying to clean this up from our code ... we're loading jQuery twice for some convoluted reason, and seeing errors in some jquery-ui plugins. – Bulbul

good one sir, may i use google cdn & fall back to hosted library if google fail as in this link , in that case i need to load jquery 2 times right ? – Interrelate

Answer 2

Using an iframe will cause JQuery to load twice if you
1) load JQuery for each page (i.e. in Ruby on Rails via application.html.erb) and
2) the iframe is also a page from your application rather than an iframe of an external site.

Abreact

Answer 3

i spent hours figuring out why using jQuery.noConflict() doesn't work as is...

Just use var j$ = jQuery.noConflict(); and after that use j$ in place of $ every time you use Jquery on that page.

Solis

or use jQuery(function($) { }), which wraps your function and allows you to use $ as normal – Cornell