Rich-text Reply

pollForElement not firing?

angelique 07-06-16

pollForElement not firing?

I'm using an Optimizely test to add a class to buttons across my three-page form. On the final page, the buttons do not load immediately; they appear after an AJAX call for the relevant information. As a result, the basic Optimizely script was not applying the new class to these buttons.

 

I've added the "Poll for element" function used as an example here: http://developers.optimizely.com/javascript/code-samples/index.html#helpers-poll-for-element into the "Edit code" box, like so:

var pollForElement = function(selector) {
  if ($(selector).length > 0) {
    // code to run once element is found on page
    $(".btnCTA").addClass("btnCTAupdated");
  } else {
    setTimeout(pollForElement, 50);
  }
};

if ($('.wrapper').hasClass('comparableInvResults')) {
	pollForElement('.btnCTA');
}

This has no effect on the live site or when I go into "Interactive Mode" while editing the variation/experiment. However, if I'm on the page on the live site and enter this same code into the JS console on Chrome, it works as expected, which leads me to believe the issue is in how I've entered the code in Optimizely. What am I doing wrong here?

Mario 07-07-16
 

Re: pollForElement not firing?

Hi there,

Thanks for reaching out to the community!

I'm wondering if the if ($('.wrapper').hasClass('comparableInvResults')){} condition is never met at the time when Optimizely executes this line of code. In this case pollForElement() would also never get called.

Why don't you check directly for the '.btnCTA' via:

var pollForElement = (function() {
if ($('.btnCTA').length > 0) {
// code to run once element is found on page
$(".btnCTA").addClass("btnCTAupdated");
} else {
setTimeout(pollForElement, 50);
}
})();

Best,
Mario
Sr. Technical Support Engineer
EMEA | Amsterdam
Optimizely
angelique 07-07-16
 

Re: pollForElement not firing?

Hi, Mario -- Thanks for your suggestion. Unfortunately, that has the same result -- no effect when the page loads, but the class is added if I place the code directly in the developer tools console.
Mario 07-08-16
 

Re: pollForElement not firing?

Hi Angelique,

 

Please try out following solution:

 

window.myInterval = setInterval(function() {
if ($('.btnCTA').length > 0) {

//put variation code here
$(".btnCTA").addClass("btnCTAupdated");

    clearInterval(window.myInterval);
}

}, 50);

Does that help?

 

Best,
Mario

Sr. Technical Support Engineer
EMEA | Amsterdam
Optimizely
angelique 07-12-16
 

Re: pollForElement not firing?

Mario -- This gets me super close! In my test, this changes the class for the first of the btnCTA elements, but the other 2 on the page do not get the new class. Usually, with addClass, an each function isn't required. Any suggestions? 

Mario 07-13-16
 

Re: pollForElement not firing?

Hi Angelique,

I would give each() a try. I'm assuming that not all elements have been fully loaded at the time the interval executes.

 

Best,
Mario

Sr. Technical Support Engineer
EMEA | Amsterdam
Optimizely
JasonDahlin 07-13-16
 

Re: pollForElement not firing?

Hi @angelique,

Once the code finds an element that matches, it stops looking.  It will not detect new elements added later.

 

(You technically can make it continue to poll for new items added, but the users would notice their browser slowing down while this pollign takes place every 50 milliseconds.)

 

To handle this, I have had the developers add a trigger that I can listen for.  Whenever an item is dynamically added to the page (maybe the products reloaded on the page due to the user selecting a filter or sort option), they fire a trigger to let me know the items have been inserted.

 

Here is the basic structure for creating a function named "doSomething" which would be what adds the class to items that don't already have it and listens for the trigger "newThingLoaded" which your DEVs would trigger to let you know things have been added to the page.  doSomething runs once when the page loads, in case anything is already there, then again whenever the trigger fires, so you need to make the jQuery selector smart enough to only target the items that need the class added, :

 

function doSomething(){
	if ($('.things_I_am_looking_for:not(.btnCTAUpdated)').length >0) {
		$.map($('.things_I_am_looking_for:not(.btnCTAUpdated)'),function(thisThing){ 
			$(thisThing).addClass('btnCTAUpdated'); 
		}); 
	} 
} 

doSomething(); 
$(window).on('newThingLoaded',function(){ 
	doSomething(); 
});


--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
angelique 07-13-16
 

Re: pollForElement not firing?

Hah! This got me on the right path--the idea that I needed to hook to something related to the AJAX function completing reminded me that jQuery has such an option; I've updated my code with the following and everything seems to be working as expected:

 

$(document).ajaxComplete(function() {
  $(".btnCTA").addClass("btnCTAupdated");
});

Thanks for the code suggestions and nudging me in the right direction. Smiley Very Happy