Question

I have a Jstree populating a list of items. When I click a node a partial is loaded with ajax. Everything works fine until I include the jquery.validate script to validate my forms.

<script src="/scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script src="/areas/manager/scripts/jquery.jstree.min.js" type="text/javascript"></script>
<script src="/areas/manager/scripts/jquery.hotkeys.js" type="text/javascript"></script>
<script src="/areas/manager/scripts/admin-panel.js" type="text/javascript"></script>

As soon as I include this file the tree nodes cannot be selected. Also drag and drop capability doesn’t work. There are no javascript errors reported in firebug. Anyone know how to resolve such conflicts?

Thanks

Answer 1

I’m guessing you’re using version 1.6 of the validation library, take a look at the source here: http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js

All the way at the bottom:

$.extend($.fn, {
    delegate: function(type, delegate, handler) {
        return this.bind(type, function(event) {
            var target = $(event.target);
            if (target.is(delegate)) {
                return handler.apply(target, arguments);
            }
        });
    },
    triggerEvent: function(type, target) {
        return this.triggerHandler(type, [$.event.fix({ type: type, target: target })]);
    }
})

The problem is that 1.6 created the $(selector).delegate() function above, which is not jQuery core .delegate(), the main issue is a naming conflict and the arguments/behavior aren’t the same:

• jQuery.validate: .delegate(type, delegate, handler)
• jQuery core: .delegate( selector, eventType, handler )

Barring other details like context, the first issue is the first and second arguments are backwards.

Including jQuery.validate 1.6 breaks the .delegate() function which jsTree relies on. If you just upgrade to version 1.7+ of the validation plugin, this issue should go away, it calls its function validateDelegate after that.