Cloning controls

[asuyhaydaMember]

Hello,

Pulling my hair out with this one. I have a website where the html is generated dynamically with jqWidgets layed on top of them. Furthermore, I have sections of code that need to be dynamically duplicated when the user clicks a “New Group” button.

Problem is, when I clone the controls, they are retaining their original references. I’ve looked online for solutions and they don’t seem to be fixing the problem. At first, I thought it would be as simple as changing the id’s. Unfortunately, I’m getting the same behavior. I’ve tried several different methods to change the id’s.. none of them seem to work. I really need to solve this, otherwise I’ll be in trouble.

Example: 1. clone a drop down list 2. append it to the end of the main div 3. New Drop Down list appears, but when I click the new one, the ORIGINAL drop down list gets activated… I’m stuck. Any suggestions would be appreciated. Here is my code:

var id = this.id; //this is embedded inside another foreach loop.. I need to retain the original ID for the main container.
var groupCount = 0;

$(“#newGrp_” + this.id).jqxButton(
{
theme: ‘web’,
width: ‘100px’,
height: ’25px’
});

//actions to take when the Submit button is clicked.
$(“#newGrp_” + this.id).bind(‘click’, function () {

//copy the group and add a new one to the end of the main div
var more = $(“#repeater_” + id).children().clone(true, true);

more.children().each(function () {

$(this).attr(‘id’, this.id.replace(this.id, this.id + “_” + groupCount, ‘g’));

});

$(“#main_” + id).append(more);

groupCount++;

});

This code copies the controls and appends to the main div. However, the controls do not function properly. The cloned controls are referenced to their originals. So, when I click the cloned/appended control, the original control gets manipulated.

Hopefully that makes sense.

Any help would be greatly appreciated.

Thanks!

[Peter StoevKeymaster]

Hi asuyhayda,

Widgets cannot be cloned. You can clone HTML Elements, but not widgets. To create a widget, you should have HTML Element with Unique ID and then you need to call the widget’s Constructor function as shown in the documentation and samples available on our website.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts