Rich-text Reply

How to edit dynamic content

Mr-BS 06-10-16
Accepted Solution

How to edit dynamic content

Hey,

I have a side that loads or remove content by selecting a checkbox, and exactly this content (some forms) I have to rerange and style for a variation. 

Example:

I load the page, the form is a visible, sure I can now edit all the stuff in the editor. By selecting a checkbox my styled and reranged content gets totaly removed from the markup and of course all my changes are gone when the form gets loaded new.

 

First I thought I give the container a custom class and use some experiment css, but I have to rerange and add elemnts that is not possible only with css.

 

What can I do? Execute evertime the script in the editor triggerd by any action? But I´m not shure how to do that without flickering, cause content get loaded an than my script comes.

 

 

Level 2

CouchPsycho 06-10-16
 

Re: How to edit dynamic content

Hi,

that sounds like some AJAX-action. Two options come into my mind from my experience:

1. Listen to an event

If you are a lucky guy you can listen to the jQuery standard "ajax ready" event. If not -like me- you might have a custom event fired by your developers. You can than create a listener which executes code, whenever the mentioned event is fired.

2. Activate Experiment

If you have to contact your developers in any way, you may ask them to activate the experiment, whenever all action is done

I am a "ajax victim" regarding my experiments and i always have to ask for implementation of new custom events. The advantage is that they are implemented once and you might reuse them in upcoming experiments. Option 2 only works once.

Greetings



"the essence of the creative act is to see the familiar as strange." (anonymous)
Mr-BS 06-13-16
 

Re: How to edit dynamic content

[ Edited ]

Hey,

I thought I can solve this based the "poll for delay content" function, like discriped here.

I want to call the function on a click event too, like this:

/* pollForDelayedContent function variation code simple v1  */
/* _optimizely_evaluate=force */
window.pollForDelayedContent(".shipping-address", function() {
  console.log('poll function');
});
/* _optimizely_evaluate=safe */

$('.ship-to-store').on('click', function() {
	console.log('click');
	pollForDelayedContent();
});

but I received the following error:

Uncaught ReferenceError: pollForDelayedContent is not defined

 

Level 2
CouchPsycho 06-13-16
 

Re: How to edit dynamic content

[ Edited ]

Where do you define the function and how do you call it?

Do you get the error in the editor or in preview?

 

Try:

$('.ship-to-store').on('click', function() {
	console.log('click');
	window.pollForDelayedContent();
});

Sounds like a visibility-problem




"the essence of the creative act is to see the familiar as strange." (anonymous)
Mr-BS 06-13-16
 

Re: How to edit dynamic content

[ Edited ]

Function is in the project JavaScript

project-js.png

 

and I want execute by the on click event set in the code editor.

I checked this with the force parameter and in the dev tools console I get the error. Same with your snippet.

 

Level 2
CouchPsycho 06-13-16
 

Re: How to edit dynamic content

That image is to small for my eyes ;-)

Defining a function in experiment-JS like window.foo and calling it in a variation is, what i usually do. Maybe there is an error (syntax) but i can not read it. Have you tried a boring function which just calls an alert() to check basic functionality? console.logs are hard to find ;-)



"the essence of the creative act is to see the familiar as strange." (anonymous)
Mr-BS 06-13-16
 

Re: How to edit dynamic content

[ Edited ]

Updated the img ;-)
The code in the Project-JS is from the documentation, don´t think there is some syntax error. But I´ll try some simple stuff.

 

Strange, the second variation from the doc. (placing the function at the experiement js) seems to be working.

Level 2
CouchPsycho 06-13-16
 

Re: How to edit dynamic content

So...you got it ? I never used project.js , so i can not help you in that case. But there is an error marked in the script window.

 

The main mistake seems to be to forgot the window. ahead of a function name when using your own functions.

 

I usually start with a extremly simple function to check visibility and calling. Then i complete the function step by step.

 

If i can help you, just let me know. 




"the essence of the creative act is to see the familiar as strange." (anonymous)
Mr-BS 06-15-16
 

Re: How to edit dynamic content

Yes,

the experiment JS solution works fine for me.

By the way, the screenshot from the project JS with the error marked is from the documentation Man Wink

Level 2