Rich-text Reply

Adding jQuery to experiment variations

John 05-12-14

Adding jQuery to experiment variations

I am trying to use jQuery tabs in an experiment variation but the tabs are not working correctly which tells me there is a conflict.


Now the jQuery code(below) and links to the css etc are on the target page on the live site and if I add the tabs html to the live site the tabs display correctly as expected, however when I add the tabs html to the experiment variation in Optimizely the tabs do not work.


Optimizely uses jQuery and also noConflict to prevent such issues so why are the tabs not working via Optimizely but fine on the live site???


jQuery code used...






                                window.jQuery( "#tabs" ).tabs();





Can anyone advise how I can fix this?? 

Level 1

Ricky 05-12-14

Re: Adding jQuery to experiment variations

Hey John,

A couple of things:


1. If you're leaving the script tags in the code then you will get a syntax error. Just putting code into the 'Edit Code' section without the script tags is the right way to go.


2. You're right, we load jQuery with noConflict, so you shouldn't need to call that again.


I think the problem here might be that you're trying to use the 'Edit HTML' functionality to add a script tag directly to the HTML, but the best way to do this is to actually paste the jQuery statement directly into the 'Edit Code' section which can be accessed by clicking the tab on the bottom right of the editor page.


Screen Shot 2014-05-12 at 1.18.00 PM.png


If the function is defined on the page and works when you run it in the console, then you should be able to access it by prefacing calls to jQuery with window.


Let's work on this offline to make sure we figure out your specific problem, but the key takeaway is if there is a way to make it run in the console, there should be a way to make it run through an Optimizely experiment.