Rich-text Reply

changing the modal window being triggered by a form submission

dtwilson 11-21-14

changing the modal window being triggered by a form submission

Hi all,

 

I have an eCommerce site (www.thenewyouplan.com) which currently has a modal popup window being triggered by clicking "add to box" buttons - simple http form post.

 

I want to test using a different variation of the modal popup content and I've done some basic "replaceWith" commands to test with as below:

 

$("<div id=\"myWindow1_body\" class=\"x-window-body\" style=\"border: 0px; overflow: auto; padding: 0px; margin: 0px; width: 300px; height: 149px; background-color: rgb(255, 255, 255);\">").replaceWith("<div id=\"myWindow1_body\" class=\"x-window-body\" style=\"position:relative; border: 0px; overflow: hidden; padding: 0px; margin: -1500 0 0 300 ; width: 200px; height: 149px; background-color: rgb(255, 255, 255);\">");
$("<div class=\"ext-el-mask\" id=\"ext-gen7\" style=\"display: block; width: 1327px; height: 3758px; z-index: 9000;\"></div>").replaceWith("<div id=\"ext-gen7\" style=\"visibility: hidden; display: none; width: 1327px; height: 3758px; z-index: 9000;\"></div>");

 

The problem I am having is that the original code snippets aren't actually available on the page until *after" the form has been submitted (controlled by server side scripting). Therefore my existing experiment isn't having any effect.

 

I've looked vaguely at setting up a Custom Event in Audiences but have no idea what to do in here. I simply want to do something like:

IF form.fieldname EXISTS

 

Level 2

JDahlinANF 11-21-14
 

Re: changing the modal window being triggered by a form submission

[ Edited ]

This article https://help.optimizely.com/hc/en-us/articles/200040635 shows how to wait for dynamic content to load into your page.

 

You can wait for '#myWindow1_body'

 

I'm not able to see any visual differences with your code, so I set it up this piece here that changes the image in the modal - this way you can see if it is running or not:

function waitForDelayedContent(selector, experiment, timeout, keepAlive) {
    var intervalTime = 50;
    var timeout = timeout || 3000;
    var keepAlive = keepAlive || false;
    var maxAttempts = timeout / intervalTime;
    var attempts = 0;
    var elementsCount = 0;
    var interval = setInterval(function() {
        if ($(selector).length > elementsCount) {
            if (!keepAlive) {
                clearInterval(interval);
            }
            experiment();
            elementsCount = $(selector).length;
        } else  if (attempts > maxAttempts) {
            clearInterval(interval);
        }
        attempts ++;
    }, intervalTime);
}

waitForDelayedContent('#myWindow1_body', function(){
  $("#myWindow1_body input").attr('src','http://assets.wornon.tv/uploads/2013/09/sheldons-red-circle-graphic-tshirt.jpg');
});