How to clone a jQuery Chosen select box with dynam

Question

I'm facing issues while cloning an existing chosen element (not the options but the entire select box) and creating a dynamic id for them.

I'm able to clone the chosen element however, it has the same id generated as that of parent chosen and is not allowing to select an option in there.

When I click on the newly generated chosen box, the parent chosen that was cloned is showing the list of options to select instead of child chosen. Child chosen was made frozen and I'm unable to select the options in it.

Screenshot:

JS:

$("#addCostDetailsRowBtn").button().click(addCostRowFn);

var addCostRowFn = function () {
var rowLen = $(".costTemplateRow").length;
//alert(rowLen);
var $newRow = $("#costTemplateRow1").clone(true);
$newRow.find('select').each(function () {
    //alert($(this));
    //alert($(this).attr('id'));
    var item = $(this).attr('id');
    if('undefined'!=item) {
        var newItem = item.replace(/^(.*)(\d+)$/, function(match, p1, p2) {
            return p1+(parseInt(p2)+1);
        });
        $(this).attr('id', newItem);
        $(this).removeClass("chzn-done");

    }
});

$('#costsTable tr:last').before($newRow);
return false;
};

Can someone please help me get the issue resolved?

Thanks, Jaya Krishna

Answer 1

ok then, here is what I did to clone a chosen control with dynamic populated options. Maybe a better way, but without more info on jquery cache/cloning this at least works.

var $parent = $('#myThingParentNode');
var clonePropDdl = $parent.find('.chosenProperty').clone();
//get selected value of chosen venue control
var clonePropDdlVal = $venue.find('.chosenProperty').val();
//find the element to add the new Chosen control
var $newCloneElem = $('#newPropCloneElement');
//add the new clone
$newCloneElem.append(clonePropDdl);
//initialize the clone
$newCloneElem.chosen({ width: "150px" });
//delete the cloned chosen detritis!! This is what makes this work
**$newCloneElem.find('.chosen-container:eq(1)').remove();**
//set the selected value of the new clone to value of the clone source
$newCloneElem.val(lastVenueVal).trigger('chosen:updated');

Answer 2

It seems that the problem is that the clone is still sharing some data with the original object. From the Jquery docs http://api.jquery.com/clone/

Normally, any event handlers bound to the original element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the .data() method) is also copied to the new copy.

However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
$clone = $elem.clone( true )
.data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing

Hope this helps