Variation code not accepting .on()

[#1]

Hi there

I've been experiencing some issues once in a while with the Variation Code Editor.

For example, I was setting up a test today, where I rearranged the left menu on a webshop, and for that I had to make a script that, on click, added a class to the clicked element, and at the same time removed this class from any other element.

I made it all work in jsfiddle, but when I pasted it into the Variation Code Editor, it gives me the following warning.

I've experienced this and other similar errors once in a while.

Is there a way to disable code validation? Since I know the script is working as it should.

[#2 · Accepted solution]

Alright. So I figured out what the problem was.

Optimizely includes trimmed jQuery 1.6.4 by default.

But from the Optimizely "home screen" click Settings > JavaScript, check
'Include trimmed jQuery (1.11.3) in project code (recommended)'
and click save.

I guess .on() wasn't added to the jQuery library until 1.7.x

So if anyone else are experiencing problems with the Variation Code Editor not accepting valid code, try changing the jQuery version to 1.11.3

[#3]

Just as FYI... 

since you know the code works when you run it in your console, you could reference

window.$('xxx').on() 

which would force it to wait before executing and use your window-scoped version of jQuery

This technique is also useful for when you want to use a custom function defined within your site's JS file or perhaps use a method that comes in via jQuery extension/plugin

.

[#4]

Thanks nap0leon

That's good to know

[#5]

Henrik,

Thanks for the heads-up. 

I've been using the solution mentioned by Jason for so long that I hadn't noticed the availability of jQuery newer than 1.6.4. 

Commentary

I find it a little odd that the newer version of jQuery (1.11.3) is listed in the middle of the choices. Skim-readers like myself are likely to continue to miss this. 

[#6]

@cubelodyte I totally agree with you.

I didn't figure it out until I started reading the jQuery documentation for .on() and saw that it wasn't introduced until v.7.x.x and remebered seing a couple of different versions in the Optimizely settings.

What I don't understand is why the newest (stable) version of jQuery isn't automacially chosen for new accounts/projects.

I can't imagine that I'm the first trying to use a newer method not supported by the default jQuery version in Optimizely.

Anyways. Now I know where to look, if Optimizely tells me a method isn't a method

Guess they haven't A/B tested the sort order of the jQuery versions. *mic drop*

[#7]

Jason, 

Another method I've found effective is to eschew the alias "$" and use the fully qualified "jQuery":

    jQuery(document).on('eventName', function(event, data){
        return stuff;
      }, {});

Maybe there's something I'm still missing about 'scope'.

I have another question for you:

Does window.$('') really cause the variation to "wait" when used in variation code?

I've used this in the experiment JS (formerly Global JS) and depending on the page load timings, I've been forced to put the code inside 

$( document ).ready(function() {
});

In the case of one site, I recently had to move it to

window.onload = function() {
});