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!!

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.

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.