Rich-text Reply

Can you duplicate elements on your page

LaraBC 01-05-15

Can you duplicate elements on your page

Hi,

 

I was wondering if it was possible to duplicate certain things on your page? I have a button that i would like to duplicate, so there would be 2 buttons on my page. 

 

Is this possible?

Level 2

adzeds 01-05-15
 

Re: Can you duplicate elements on your page

I am not sure there is a way to do this in the WYSIWYG editor.

In the edit code section you can use the clone() function to copy and element and insert it somewhere else:
http://api.jquery.com/clone/
David Shaw
Level 11

Re: Can you duplicate elements on your page

Hi @LaraBC,

 

@adzeds is on the right path that the most direct way to copy an existing element is to use the jQuery clone() method.  However, you would need to write your own code for this in the code editor.

 

There is a way to do this within the visual (WYSIWYG) editor.  Select your button element, and then choose Edit Element -> Edit HTML.  Copy this code to your clipboard.  Then select an element near where you want to place the new button.  Select Insert... -> Insert HTML, and paste in the code you copied.  If needed, you can use Rearrange to move the newly inserted code to the desired spot in your layout.

 

The caveat to this visual method is that when you use Edit HTML to copy your code, you are only copying the end static result of your button's HTML, after the page has fully loaded.  In this way, dynamic IDs, event handlers, other JS functions, etc. may not correctly be carried along to the second button (if they are attached).

 

This is less of an issue when using clone(), but as the documentation states, you do have to use the extra withDataAndEvents or deepWithDataAndEvents, depending on how much dynamic code and data need to be copied.  Also note the callout about the clone() method creating elements with duplicate IDs, which could create unforeseen downstream effects.  As always, we recommend thorough testing of your changes.

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com