Modify elements of your site which load asynchronously (e.g. AJAX)

Sometimes, although your modifications appear correct in the editor, they do not appear on your pages once the test is launched. This problem can arise when you try to edit elements which are loaded with AJAX.

This content is not included directly in your server’s response to each visitor’s request. It is called after the page has initially loaded, with a slight delay, or after the visitor completes a certain action.

As AB Tasty executes the code of your modifications as soon as the page loads (to ensure that visitors do not experience a flickering effect), our code tries to implement your changes before the content you are trying to change has been inserted into the DOM (Document Object Model). In other words, you are telling AB Tasty to act on elements which do not yet exist. Your changes can therefore not be implemented.

The solution to this problem is to delay your modifications for a short time. Several methods for this exist, each based on custom JavaScript code. Here, we present two:

1. setTimeout()

The first is the easiest to implement and involves the method setTimeout(). This JavaScript method takes two arguments. The first is the function to be executed, and the second is the delay in milliseconds before the function will be executed.

For example:

<button onclick = "setTimeout( function(){ alert('Hello World') }, 3000)">Try it</button>

In this example, the message "Hello World" will appear 3 seconds after a user clicks on the button.

Within AB Tasty, you can use this function in the following way. In the menu for the given variation, click “Add Javascript”. A JavaScript editor will then appear. Enter the following code and edit the body of the function.

setTimeout( function() {
  // Here, enter the code corresponding to the modification you wish to implement.
}, 1000 )

The disadvantage of this method is that you do not know in advance how long a delay to enter. The higher this value, the more certain you can be that the required AJAX element will have time to load, but the later your modification will be applied. If the AJAX element loads within 100 ms, but you enter a delay of 500 ms, there is a risk that your visitors might briefly see the original version (a flickering effect). You must therefore experiment, testing different values to see what works best. The second method tries to get round this problem.

2. setInterval()

The method setInterval executes a JavaScript function at regular intervals. The idea is to check regularly to see if the given element exists in the DOM. For this, you can use the following JavaScript code, which you will put in place in the same way as for the first method.

/* ------------------ Do not edit --------------- */
 function applyWhenElementExists(selector, myFunction, intervalTime) {
   var interval = setInterval(function() {
     if (jQuery(selector).length > 0) {
        myFunction();
        clearInterval(interval);
     }
   }, intervalTime);
 }
 /* --------------------------------------------- */

where:

selector (compulsory) is the selector of the AJAX element, expressed as a string of characters in quotes, e.g. ".elementID" or "#elementClass".

myFunction (compulsory) is a function containing the code of the modifications to be applied. It is defined anonymously when the function is called.

intervalTime (compulsory) is the frequency with which AB Tasty will check to see if the element has loaded.

Next, call this function as follows:

/* ---------------- To be edited ---------------- */
  applyWhenElementExists("selector", function(){
   // Here, enter the code corresponding to the modification you wish to implement.
  }, 50);
 /* --------------------------------------------- */

Note that you must replace "selector" with the correct selector, add your custom code, and potentially change the value of the interval, 50 being a good default option.