15

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

Sachin Chavan
  • 5,578
  • 5
  • 49
  • 75
yuri
  • 2,851
  • 3
  • 18
  • 8
  • Make sure that you are using one instance of jquery and it goes on top of all other js included files. – Sarfraz Apr 28 '10 at 17:50
  • 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 – yuri Apr 28 '10 at 17:56
  • The `script` element you're writing with `document.write` won't run successfully due to the doubled up quotes in the src attribute. – interjay Apr 28 '10 at 17:59
  • @interjay any reason it would run fine on my box with same browser? – yuri Apr 28 '10 at 18:03
  • nevermind...then what I am thinking is probably not the problem – yuri Apr 28 '10 at 18:06
  • 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? – interjay Apr 28 '10 at 18:17

3 Answers3

19

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • The part about double loading jQuery causing errors - is this from experience, or just good advice? – ripper234 Feb 06 '12 at 13:44
  • 8
    @ripper234 - 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!" – Nick Craver Feb 06 '12 at 14:23
  • 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. – ripper234 Feb 06 '12 at 15:03
  • good one sir, may i use google cdn & fall back to hosted library if google fail as in this [link](http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-go) , in that case i need to load `jquery` 2 times right ? – fresher Nov 25 '16 at 06:42
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.

Michael Schmidt
  • 9,090
  • 13
  • 56
  • 80
user1515295
  • 1,181
  • 11
  • 28
1

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.

webmaker1
  • 389
  • 1
  • 9
  • 24