How can I avoid calling jquery twice

Question

I am using Jquery Form Plugin to submit my form. The head tag of my html file looks like following

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 then 10 other javascript files

AND Then   
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js">
<script type="text/javascript"> 
       $(document).ready(function() { 
      var options = { 
                       success:       showResponse
                         };
                         $('#myForm').ajaxForm(options); 
        }); 
  </script>         

To see the actual picture of my code please check this http://jsfiddle.net/Xfrms/1/

The problem is even though I call jquery library on the very top of my code, if I don't call the jquery library right before the jquery.form.js plugin then it (jquery.form.js) doesn't work. I have tried to call those 10 other javascript files after the query.form.js plugin calling the jquery library on the very top but in this case the functionality for which the javascript files are being called doesn't work.

After seeing this post, I think calling jquery twice can cause problems.

Could you please tell me what could possibly going wrong in my code and how to avoid having to load jquery right before the the jquery form plugin but still get it working?

Thanks

Topple

What are the 10 other javascript files? Do any of them also declare $ as something? Do any of them call jQuery.noConflict()? – Hulett

Thanks for your reply MrOBrian. Yes. most of them also declare $ but none of them call jquery.noConflict() do you have any suggestion? thanks :) – Topple

by "declare $" I mean set it something else, something other than jQuery. Are you using another library, similar to jQuery, that is overwriting jQuery? – Hulett

No, I am not using any other library. Please check this link jsfiddle.net/Xfrms/1 This will give you an idea about my scripts. Thanks – Topple

do you think the problem is because of conflict between multiple jQuery files? – Topple

I've looked at your fiddle, but it's set to Mootools and all your javascript and css file links are invalid, so it's hard to tell what all those files do. Plus, you have text in the JavaScript panel, which is invalid. If you are having to include jQuery again, that tells me there is something conflicting with, or overwriting, the first one – Hulett

Answer 1

As I can imagine your problem is that some of the other libraries is using the $ keyword markup to instantiate each calls. If I am correct the just try the following and you will be all set to go..

var $jq = jQuery.noConflict();

Then for all of your jquery calls try use your new markup.. the $jq.

For more detailed info check out this page: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Use the js script reference at the beginning of your page to ensure that all code is loaded properly at start. Moreover it is likely that some error could be populated from loading all scripts.. To check if any errors exist, use some debugging plug in like Firebug.

Brownfield

Answer 2

Have you tried:

window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')

Periderm

Correct me if I am wrong but don't you use the code so that when CDN-hosted jQuery is momentarily down, you fall back to a locally hosted version? – Topple

It can be used for that too. Basically this just checks to see if jQuery is defined and if not, writes it to the browser. – Periderm