2 versions of jquery

Question

I have to load 2 versons of jquery in order for an onclick event and a form post event. The onclick event works ok with calling http code.jquery.com/jquery-latest.min.js but the post event will not work unless i call http code.jquery.com/jquery-1.4.2.min.js and http://code.jquery.com/ajax/jquery.validate/1.7/jquery.validate.min.js But i have to use the noConflict in order to get things to work.

The call for the latest.min works my onclick event to load into a div The call for the submitHandler: function(form) works my form post which loads into another div.

The menu is operated by the onClick event and loads the correct menu into the top bar. The user then selects from a drop down in that menu to load the form into another div below.

The form gets posted and displays a result for me in the div that the form is in and reloads the form.

The form that is loaded into the div also has the code for the form to work.

The problem is after it has worked once, if you try to post the same form that has loaded again (identical as the first including the code for posting the form) it fails to post

script used for posting form

$.noConflict();
$(document).ready(function () {
    $("#ncus").validate({
        debug: false,
        submitHandler: function (form) {
            $.post('../AddCusForm/process_form.php', $("#ncus").serialize(), function (data) {
                $('#mainBody').html(data);
                $("#mainBody").find("script").each(function (i) {
                    eval($(this).text());
                });
                $("form#ncus")[0].reset();
            });
        }
    });
});

The process form that is being loaded into the same div has the identical code as above. and replaces the original form with another form (Same name)

Answer 1

Your code is releasing the $ variable each time $.noConflict is called. The first time, that reverts you back one version of jQuery; the second time, it probably makes $ undefined.

Ideally, what you want to do is use only a single version of jQuery.

Sometimes for various reasons that's not possible in the short term. For those situations:

The correct way to use multiple jQuery versions on a page is to use the return value from noConflict and/or a scoping function.

Here's the return value example:

<script src="jquery-vX.js"></script>
<script src="some-plugin-that-requires-vX.js"></script><!-- (if any) -->
<script>
var $X = jQuery.noConflict(true);
</script>
<script src="jquery-vY.js"></script>
<script src="some-plugin-that-requires-vY.js"></script><!-- (if any) -->
<script>
var $Y = jQuery.noConflict(true);
</script>

Then use $X for jQuery version X, and $Y for jQuery version Y. Note that the plugins you load will hook themselves up to the then-current version of jQuery.

Note the order of things above:

1. Include the file for the jQuery version.
2. Include any plug-ins that you need to use with that version.
3. Then use noConflict (once).

The order is important because a properly-written plug-in will use the jQuery symbol to hook itself up, so you need to make sure that jQuery is pointing at the right version when you load the plug-in.

You can also use a scoping function so you can use a given version with $ within that function:

(function($) {
    // Here, $ will be whatever you pass in below, in this example, version X
    $(...).doSomethingWithVersionX();
})($X);
(function($) {
    // Here, $ will be whatever you pass in below, in this example, version Y
    $(...).doSomethingWithVersionY();
})($Y);

If you don't like the way the version is buried at the bottom, this works just as well:

(function() {
    var $ = $X; // <== Note, jQuery version X

    // Here, $ will be whatever you assigned above
    $(...).doSomethingWithVersionX();
})();
(function() {
    var $ = $Y; // <== Note, jQuery version Y

    // Here, $ will be whatever you assigned above
    $(...).doSomethingWithVersionY();
})();