Kendo widgets/validator are being undefined in IE?

Question

I am kind of at a loss here... I am having issues with Kendo and Internet Explorer.

I have a validator that I set up, I have stepped through my code, <div id="validatorCheck">{content}</div> exists in my DOM. When the user opens my editor, I initialize the validator.

$('#validatorCheck').kendoValidator({
                        //validate: function(e) {
                        //},
                        validateInput: function(e) {
                            if(e.valid == false && scrolledToElement == false){
                                scrolledToElement = true;
                                $('#externalEditor').animate({
                                    scrollTop: e.input.offset().top
                                }, 300, function() { 
                                    //Callback after animation
                                });
                            }
                        },
                        rules: {
                            endDateValidation: function(e) {
                                //console.log(e);
                                if (e.is('[data-role=datetimepicker]') && e[0].id == 'endTimeInput') {
                                    var endTimeValid = $('#endTimeInput').data('kendoDateTimePicker');
                                    var startTimeValid = $('#startTimeInput').data('kendoDateTimePicker');

                                    if (endTimeValid.value() < startTimeValid.value()) {
                                        return false;
                                    }
                                }
                                return true;
                            },
                            autoCompleteValidation: function(e){
                                if(e.is('[data-role=autocomplete]')){
                                    var autoCompleteComp = e.data('kendoAutoComplete');
                                    if(autoCompleteComp != undefined){
                                        if(e[0].attributes.hasOwnProperty('required') && (autoCompleteComp.value() == '' || autoCompleteComp.value() == null)){
                                            return false;
                                        }
                                    }
                                }
                                return true;
                            }
                        },
                        messages: {
                            //hasItems: 'Owner Must Be Selected'
                            endDateValidation: 'End Time Must Be Greater Than Start Time',
                        }
                    });

Right after the above code, when I was stepping through this, I watched $('#validatorCheck').data('kendoValidator') and it was initialized. Then, when the user hits the save button, I call:

$('#validatorCheck').data('kendoValidator').validate(), however, now $('#validatorCheck').data('kendoValidator') is undefined and it crashes.

The editor never closed, nothing was destroyed, it is still in the DOM with a data-role of validator, which it got from my initialization in the code above, but it is undefined.

Spelling is correct, I even tried redownloading my version of KendoUI for fresh files, etc... but it doesn't do anything to help.

Chrome, Firefox, Edge, etc... all work fine. This issue only happens in IE (currently in version 11).

I am not sure if anyone knows anything about this bizarre issue, but I can't think of what it is that is going on or how to fix this.

Side note: a dropdownlist I have will do this too, where it will be undefined well after I initialized it, but only sometimes. The validator issue is happening all the time.

Answer 1

It turns out this was an issue with Internet Explorer and Salesforce Lightning Components.

Salesforce lightning components are supposed to be a self contained entity that you load all the scripts they need in the component, this included a JQuery script. In modern browsers, this worked fine. In Internet Explorer... the scripts from the Lightning Component leaked out onto the main page so I had two JQuery's loaded that ended up causing the issue.

Now that I know the issue, this may be better served on the Salesforce stack exchange, but I had no clue it was the lightning component being handled incorrectly by IE, I thought it was just some IE/Kendo issue.

Answer 2

This might be more of a jQuery version issue than an issue with Internet Explorer (IE), per se. Ensure that Kendo has access to the expected version of jQuery at runtime in IE.