How to add Chosen Plugin to dynamically created / cloned CSS div?

Question

The Chosen Plugin for jQuery (found here: http://harvesthq.github.com/chosen/ ) adds extra functionality to select HTML elements. I can add the functionality to the initial elements loaded on the page with the following code:

$(document).ready(function(){
$(".chosenProperties").data("placeholder","Select properties...").chosen();
$(".chosenType").data("placeholder","Type...").chosen();
$(".chosenInstance").data("placeholder","Instance...").chosen()

That works. All three of those classes of select elements appear in a div called #newGroup. There is a button the page that "adds" a new group, which clones the #newGroup div and adds it right beneath the first.

It contains the same elements. However, when I try to add the Chosen functionality to the select items in the cloned div, they are frozen. The interface looks the same as the first one, so Chosen is being loaded, but when I click them nothing happens. Here is the code:

    $( '#swl-add-group-button' ).click( function() {
    //addGroupToGUI();
    createClassAddRow();

} );


var rowNum = 0;     
function createClassAddRow() {
    rowNum++;
    newRow = jQuery('#newGroup').clone().css('display', '');
    newHTML = newRow.html().replace(/0/g, 1);
    newRow.initializeJSElements();
    newRow.html(newHTML);
    newRow.initializeJSElements();
    jQuery('#mainTable').append(newRow);
    addGroup(newRow);
}

jQuery.fn.initializeJSElements = function (){
    this.find(".chosenProperties").each( function() {
        alert('test');
        if($(".chosenProperties").data("placeholder", "Select properties...").chosen()){
            alert('test2');
        }
    });
    this.find(".chosenType").each( function() {
        jQuery(this).data("placeholder","Type...").chosen();
    });
    this.find(".chosenInstance").each( function(){
        jQuery(this).data("placeholder", "Instance...").chosen();
    })

}

Both alerts, test and test2, appear. So I think the jQuery is getting loaded, but it's not working for some reason. Also, I'm not sure if this makes a difference, but when I hover over the cloned div's select elements it says javascript:void(1) whereas when I hover over the original it says javascript:void(0).

Answer 1

The work around I came up with was similar to Abhinav's. I removed the Chosen generated code. Stripped the "chzn-done" class from the selectbox. Turned off display:none on the selectbox and then reapplied chose to the selectbox

$j("#masterCats_chzn").remove();
$j("#masterCats").css({display: "inline-block"}).removeClass("chzn-done").addClass("chsn");
$j(".chsn").chosen();

Answer 2

Looking at the chosen source code it seems that you cannot just clone the selects that already has been chosen, as they already have their chzn-done class set, and chosen only applies to the selects that do not have this class set. That means your call to chosen on the new select effectively does nothing.

The select appears as being chosen-enabled because you're cloning the entire group. That is, after call to clone new group already contains a chosen interface, and the select is already hidden. Of course, the chosen interface in the new group is not bound to the new select. Also, clicking on select does not change anything because jQuery.clone does not add new events by default.

Basically, you should never use jQuery.clone to clone complex content (or, more specifically, you should not clone complex content at all). If you want to create a new input group with a new chosen-enabled select, just do it explicitly.

Answer 3

I just stumbled upon here from google. Thought will reply with my .clone() based solution. Here is what I do in my project to use jquery clone and dynamically apply chosen plugin onto it:

html = '';
selectbox = $('#select-box').clone();
selectbox.removeAttr('id').attr({
    'data-placeholder': '(optional)'
}).removeClass('chzn-done').css('display','block');
html += selectbox.wrap('<p>').parent().html();

Works great for me. Removing 'chzn-done' class is mandatory step, otherwise chosen plugin will fail to activate on it.

Answer 4

its true that chosen doesnt work for cloned input. a different approach to get it working is

  clonedInput = $('#fullForm').clone;
    clonedInput.find('div.chzn-container').remove();
    clonedInput.find('selectBoX.withClass').show();
    clonedInput.find('selectBoX.withClass').removeAttr('id');
    clonedInput.find('selectBoX.withClass').removeAttr('data-placeholder');
    clonedInput.find('selectBoX.withClass').removeClass('chzn-done');
    clonedInput.find('selectBoX.withClass').chosen();