JQuery.load breaks other javascript

Question

When I use JQuery.load, it breaks my other JavaScript libraries. I receive this error:

TypeError: $.doTimeout is not a function

When I do not use jQuery.load it, works fine.

I don't understand causes this to happen. Seems like it couldn't find the function from the JavaScript file that is already rendered on source code.

Scripts

<script type="text/javascript" src="/assets/js/modernizr-1.7.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.tmpl.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ba-dotimeout.js"></script>
<script type="text/javascript" src="/assets/js/test1.js"></script>
<script type="text/javascript" src="/assets/js/test2.js"></script>

Inside test1.js

$.doTimeout("hoverOut");

Inside test2.js

$(".test").load("/test.aspx?param=" + someValue);

jquery.ba-dotimeout.js is a library

test1.js uses that library to do its fancy stuff

Please help

my guess is test.aspx is including a 2nd jquery library that is overriding the first. — Kevin B, Jul 17 '13 at 17:35
You are right. Thanks! If you had clicked the "answer question" button, I can put it as an accepted answer. — Anna, Jul 17 '13 at 17:45

score 1 · Answer 1 · edited May 23 '17 at 11:43

This problem is very similar to the one which I struggled for a week.(Now I got rid of it :) ) jQuery UI " $("#datepicker").datepicker is not a function"

Actually, if you are including 2 .js library., you must be sure that., they does not contain definitions for same function.

I don't understand causes this to happen. Seems like it couldn't find the function from the JavaScript file that is already rendered on source code.

Overriding., also could cause the same problem.

score 0 · Accepted Answer · answered Jul 17 '13 at 17:48

It looks like when you include test.aspx, another copy of jQuery.js is being included which overrides the existing version, thus causing the plugins to be lost (they were on the previous version, but not on the one that was added by test.aspx).

Either remove jquery.js from test.asmx, or add a selector to the .load to filter the results.

$(".test").load("/test.aspx?param=" + someValue + " #targetdivtoload");

JQuery.load breaks other javascript

2 Answers2